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原則:

Creator原則

Conroller原則

示例

//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)
    })
})

High Cohesion/Low Coupling

Indirection(間接性)原則

Pure Fabrication原則

Protected Variations原則

Polymorphism 多態性原則

寫著寫著就下班了,祝大家新年快樂!