聽飛狐聊JavaScript設(shè)計模式系列05

zeyu 發(fā)布于2019-08-21 10:44 / 681人閱讀

摘要：這一回，主要聊了接口的模擬，淺談裝飾者模式，模擬了摻元類實現(xiàn)多親繼承，分析了下的，如果上一回的和感覺還好的話，這回的應(yīng)該沒啥難度下一回，咱主要聊一聊單例模式。

本回內(nèi)容介紹

上一回聊到JS的類的模擬，繼承，分析了nodejs，extjs，jquery，underscore的繼承源碼。

介一回，偶們來聊一下在JS中模擬接口，摻元類，裝飾者模式，有些盆友可能用過ES6或者TypeScript的，知道在ES6里已經(jīng)有interface，在es5中呢，只能靠模擬了，來吧，開始咯~

1. 接口模式

接口模式，主要是模擬java接口檢測函數(shù)，確保接口的實現(xiàn)類必須實現(xiàn)接口中的方法：

    /**
     *    參數(shù)1:接口的名字，類型：string
     *    參數(shù)2:方法名稱的集合，類型：array
     */
    var Interface = function(name,methods){
        // 判斷接口參數(shù)的個數(shù)
        if(arguments.length!=2){
            throw new Error("Interface exactly 2 arguments are expected"!");
        }
        this.name = name;
        this.methods = [];
        for(var i=0,len=methods.length;i
這就是一個接口的模擬了，參考JavaScript設(shè)計模式上的例子，做了些修改，把一些不好理解的地方都詳細(xì)的分析了，應(yīng)該感覺還好吧。如果感覺吃力的話，可能是對接口的概念不是很了解，沒關(guān)系，后面聊其他設(shè)計模式的時候，會常用到接口。這里咱再升華一下，在接口模式的基礎(chǔ)上再寫點內(nèi)容，聊聊裝飾者模式。
（注：這里投拋異常的英文句子都是我自己寫的，英文不好，如果有單詞，語法錯誤，請見諒！）
2. 裝飾者模式
裝飾者模式，給對象動態(tài)添加職責(zé)的方式稱為裝飾者(decorator)模式。
這里我們接著接口的例子來，上面的代碼就不復(fù)制了，這里接著寫，繼續(xù)把大衛(wèi)給玩兒壞。
    var M20 = function(o){    // 這里定義一個裝飾類
        var str = "20多歲的時候,";
        // o是傳入的對象，調(diào)用傳入對象的方法，加以裝飾
        this.eat = function(){
            return str + o.eat()+",肥得很！";
        };
        this.drink = function(){
            return str + o.drink()+",就是個水桶！";
        };
        this.coding = function(){
            return str + o.coding()+",代碼又寫得撇！";
        };
    }
    alert(new M20(david).eat());    // 20多歲的時候,大衛(wèi)是個大胖子，一天只曉得吃,肥得很！
    alert(new M20(david).drink());    // 20多歲的時候,大衛(wèi)除了吃就是喝,就是個水桶！
    alert(new M20(david).coding());    // 20多歲的時候,寫代碼吧，大衛(wèi),代碼又寫得撇！
這個例子應(yīng)該很好理解吧，（注：這個代碼是接著上邊兒接口例子的代碼噢），后面我們還會用到裝飾者模式做一些復(fù)雜的例子。

先裝個逼，再繼續(xù)，最近沒啥鐘漢良的新戲，只好看他的老戲《天涯明月刀》，以前吳岱融版本的《邊城浪子》也好看，都是經(jīng)典的傅紅雪。
這一回講的內(nèi)容不多，就一個接口模式，一個裝飾者模式的入門級示例，
下面的內(nèi)容就是寫一個摻元類，算是對上一回的一個復(fù)習(xí)吧。
3. 摻元類
摻元類：也是繼承的一種，這里就簡單的模擬一下c++的多親繼承，帥狐show time，just do it：
    // 定義一個摻元類，o是傳入的子類對象
    function Mixin(o) {
        // copy聊柯里化的時候?qū)戇^的代碼，眼熟吧
        var _slice = Array.prototype.slice;
    ????var args = _slice.call(arguments,1);
        // 跟接口有點類似，從第二個參數(shù)開始遍歷
    ????for (var i=0; i
難度不大吧，當(dāng)然這里只是簡單的實現(xiàn)，代碼寫得不嚴(yán)謹(jǐn)。
在網(wǎng)上看到有JSer說："Backbone的源碼廣泛使用摻元類"，以前玩過這個框架，但在工作項目中沒有用過Backbone（這是一個依賴jquery，underscore.js的MVC框架），看到這哥們兒說的話后，就好奇想看看源碼，我們就簡單的分析下backbone的extend。
4. backbone之extend源碼淺析
backbone的extend淺析源碼（官網(wǎng)源碼地址：http://backbonejs.org/backbone.js）
首先backbone是依賴與underscore.js的，而underscore.js的_.extend在上一回我們已經(jīng)聊過了，來吧，直接看backbone的extend源碼：
    // 定義extend類，沒什么好說的
    var extend = function(protoProps, staticProps) {
        var parent = this;    // 父類
        var child;    // 子類

        // _開頭的是underscore.js的方法，這里是判斷傳入的對象是否存在
        if (protoProps && _.has(protoProps, "constructor")) {
          // protoProps.constructor是傳入對象的構(gòu)造器
          child = protoProps.constructor;
        } else {
          // 這一步是對象冒充繼承，但是要注意對象冒充只能繼承構(gòu)造里的信息，不能繼承原型.
          child = function(){ return parent.apply(this, arguments); };
        }

        // 這個_.extend是上一回聊過的underscore.js的繼承，這里是繼承父類，staticProps（這是靜態(tài)屬性）.
        _.extend(child, parent, staticProps);

        // this.constructor = child；這里是還原子類構(gòu)造器
        var Surrogate = function(){ this.constructor = child; };
        // 這一步是原型繼承父類
        Surrogate.prototype = parent.prototype;
        // 這里就是實現(xiàn)子類的原型繼承，這手法是不是有點像上一回模擬Extjs繼承的手法
        child.prototype = new Surrogate;

        if (protoProps) _.extend(child.prototype, protoProps);

        // 定義一個屬性保存父類的原型，跟上一回的模擬ExtJS繼承像吧.
        child.__super__ = parent.prototype;

        return child;
    };
    // 給model, collection, router, view, history都加上繼承.
    Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend; 
這個就是backbone的繼承實現(xiàn)了，難解的地方我都寫了注釋，如果有分析錯的地方，請指正。如果感覺暈菜的話，可以跳過，。
這一回，主要聊了接口的模擬，淺談裝飾者模式，模擬了摻元類實現(xiàn)多親繼承，分析了下backbone的extend，如果上一回的underscore和extjs感覺還好的話，這回backbone的extend應(yīng)該沒啥難度~~
下一回，咱主要聊一聊單例模式。
話說最近鐘漢良，蔣勁夫領(lǐng)銜的《我要上學(xué)啦》真人秀第一季over了，從第一期追劇追到最后，真是好玩吖，主題曲也勵志：如果能，重返17歲，插上翅膀你敢不敢高飛...

注：此系飛狐原創(chuàng)，轉(zhuǎn)載請注明出處