Javascript面向对象编程之一：初体验

至少在今年九月份之前，我在写javascript时仍然是下面这个样子：

function findById(_id){
   //do...
}

function save(){
   //do...
}

当时，我感觉到了一些问题所在。当项目越来越庞大时，前端交互日渐复杂后，这样机械地罗列function(){}肯定是不行的。因为它最终将导致代码失去组织，异常难以理解和维护，必须以模块化策略作为解决方案。我思考了类似EasyUI、Ztree这类的前段框架，也听取了同事的意见，我相信将Javascript面向对象化编写是可行的，而且需要立即放弃曾经的编码习惯，改善编码方法，一切从新开始。

在经过了两个多月的摸索和实践后，我总结了一些经验，并在参考了一些资料的前提下，将这些经验写成一个系列的文章。本文是第一篇，主要以最直观的方式体验一下面向对象的javascript，希望对你能有所帮助。

我们还是以一个简单的案例开始吧！

需求：现在有一只叫做Kitty的小猫，服务器会给你关于这只猫的数据信息，你需要在页面上把它的名片信息显示出来，就像下面这样。

服务端提供的数据格式：{“name”:””,”telephone”:””,”“address”:”“}

为了完成这个需求，我们需要两个类：

Viewer：掌控全局。包含了当前页面中需要展示的元素集合，你可以将需要在页面显示的对象注册进去。在页面文档加载结束后，Viewer会逐个调用所注入对象的显示方法。

Cat：本案例中的业务类。它自己负责自己的所有处理逻辑，但是在展现时，需要Viewer给它分配显示区域。

页面加载

$(function(){
	var kitty=new Cat($("#cardContent"));
	var viewer=new Viewer();
	viewer.addItem(kitty);
	viewer.display();
	 
});

定义Viewer类

var Viewer=function(){
	var itemsToDisplay=new Array();
	var displayArea;
	this.addItem=function(_item){
    	   itemsToDisplay.push(_item);
	}
	this.display=function(){
    	   for(var index in itemsToDisplay){
    	    itemsToDisplay[index].display();
		}	
	}
}

定义Cat类

var Cat = function (_displayArea) {
	var name;
	var address;
	var telephone;
	var displayArea;
	this.setDisplayArea = function (_displayArea) {
    	   displayArea = _displayArea;
    	   return this;
	}
	this.display = function () {
    	   this.init().loadData().loadHtml().fillData().loadStyle();
	}
	this.init=function(){
    	   displayArea=_displayArea;
	}
	this.loadData=function(){
    	   var data=$.ajax();
    	   name = data.name;
    	   telephone = data.telephone;
    	   return this;
	}
	this.loadHtml = function () {
    	   displayArea.html($.load("htmlUrl"));
    	   return this;
	}
	this.fillData = function () {
    	   $("#name").text();
    	   $("#telephone").text();
    	   $("#address").text();
	}
	this.loadStyle = function () {
    	   //do...
    	   return this;
	}
}	

Cat类负责自己去组织自己的数据，决定自己的展现方式和样式。它是独立的，将它从页面中移除后，不应该影响到其他模块功能。当然，并不是页面中的每个元素都需要通过一个实例对象去处理，它需要考虑模块化策略和业务概念。

到此为止，案例中的功能就完成了。在后面的文章中，我会继续写到关于类定义、属性、继承等方面的内容。