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

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