JavaScript面向对象的设计原则(二)

这一期,我们来看下JavaScript面向对象设计中的核心--对象.面向对象的本质是将现实世界抽象层到计算机的世界,Class所体现的正是人类在观察世界中所经常进行的一项工作,分类.

我们可能会经常整理屋子,然后将整理后的东西分门别类的放好.我们根据什么分类?电器,食物,书籍,这些属性是我们分类的依据,这些不同类别的用品都有什么功能?食物可以吃,可以加工,书籍可以看,电器可以使用.抽象到计算机的世界,于是就有了class,property,method,类,属性,方法.

所以我们日常中所进行的活动,很多都是分类的活动,你在工作中生活中所做的分类活动就是一种面向对象的设计行为,相对于类的概念,对象更具体,粒度更小,我们可以将具有一类共性的对象称为类.

当一个对象很具体,我们就称其为一个实例.

示例

var personInstance = {    name:'jacky',    age:60,    six:'meal'  }

当一个对象很抽象,我们可以称其为类.

示例

var PersonClass = {    name:'',    age:'',    six:''  }

这里我们没有使用任何JavaScript模拟类的技术,也没有用上ES6的class,但实际上这就是一个实例,一个类,从中我们可以看到,面向对象的设计其实是语言无关的,只要你能够表达出其中的含义,如何实现,并不是重点.

JavaScript类设计

抛开各种模拟类的语法糖,让我们直面本质来看看如何设计一个JavaScript类.

1.合理封装

示例

function MenuTree () {      this.dataSource = [],      this.template = '<div id="menu-tree"><div>',      this.element = null,      this.init = function(domString){          var scope = this;          scope.element = document.querySelector(domString);          scope.render = function () {              scope.element.innerHTML = scope.template;          };          return scope;      }  }  //for example  new MenuTree().init(domString).render();

示例

function List () {      this.dataSource = [],      this.template = '<div id="list"><div>',      this.element = null,      this.init = function(domString){          var scope = this;          scope.element = document.querySelector(domString);          scope.onBeforeRender();          scope.render = function () {              scope.element.innerHTML = scope.template;              scope.onAfterRender();          };          return scope;      },      this.onBeforeRender = function(){          code...       },      this.onAfterRender = function(){          code...      }  }

UI类示例

function UI(constructor) {      this.dataSource = [];      this.template = constructor.template || '';      this.element = null;      this.onBeforeRender = constructor.onBeforeRender || function () {              };      this.onAfterRender = constructor.onAfterRender || function () {              };  }  UI.prototype = {      init: function (domString) {          var scope = this;          scope.element = document.querySelector(domString);          scope.onBeforeRender();          scope.render = function () {              scope.element.innerHTML = scope.template;              scope.onAfterRender();          };          return scope;      }  };

List重构示例

function List() {      UI.apply(this, arguments)  }  temp = List.prototype.constructor;  List.prototype = UI.prototype;  List.prototype.constructor = temp;    var myList = new List({      template: '<h1>hello world</h1>',      onBeforeRender: function () {          //code...      },      onAfterRender: function () {          //code...      }  });  myList.init('ui-list').render();

MenuTree重构示例

function MenuTree(){      UI.apply(this, arguments);  }  temp = List.prottype.constructor;  ....    var myMenu = new Menu()  ....

2.基于职责设计

1. 每个类的职责必须明确
2. 每个类只承担一项职责

1. Creater
2. Controller
3. Pure Fabrication
4. Information Expert
5. High Cohesion
6. Indirection
7. Low Coupling
8. Polymorphism
9. Protected Variations

Expert/Information Expert原则:

//view  var indexView = app.createView({      template:'<div>{name}</div>',      onBeforeRender:function(data){          //code....          return data;      }  })  //model  var indexModel = app.createModel({      getData:$.post(url,function(){})        })  //controller  app.createController('indexController',function(){      indexModel.getData().then(function(data){          indexView.setData(data)      })  })