聽飛狐聊JavaScript設計模式系列05

zeyu 發布于2019-08-21 10:44 / 689人閱讀

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

本回內容介紹

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

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

1. 接口模式

接口模式，主要是模擬java接口檢測函數，確保接口的實現類必須實現接口中的方法：

    /**
     *    參數1:接口的名字，類型：string
     *    參數2:方法名稱的集合，類型：array
     */
    var Interface = function(name,methods){
        // 判斷接口參數的個數
        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設計模式上的例子，做了些修改，把一些不好理解的地方都詳細的分析了，應該感覺還好吧。如果感覺吃力的話，可能是對接口的概念不是很了解，沒關系，后面聊其他設計模式的時候，會常用到接口。這里咱再升華一下，在接口模式的基礎上再寫點內容，聊聊裝飾者模式。
（注：這里投拋異常的英文句子都是我自己寫的，英文不好，如果有單詞，語法錯誤，請見諒！）
2. 裝飾者模式
裝飾者模式，給對象動態添加職責的方式稱為裝飾者(decorator)模式。
這里我們接著接口的例子來，上面的代碼就不復制了，這里接著寫，繼續把大衛給玩兒壞。
    var M20 = function(o){    // 這里定義一個裝飾類
        var str = "20多歲的時候,";
        // 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多歲的時候,大衛是個大胖子，一天只曉得吃,肥得很！
    alert(new M20(david).drink());    // 20多歲的時候,大衛除了吃就是喝,就是個水桶！
    alert(new M20(david).coding());    // 20多歲的時候,寫代碼吧，大衛,代碼又寫得撇！
這個例子應該很好理解吧，（注：這個代碼是接著上邊兒接口例子的代碼噢），后面我們還會用到裝飾者模式做一些復雜的例子。

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

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

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

        // this.constructor = child；這里是還原子類構造器
        var Surrogate = function(){ this.constructor = child; };
        // 這一步是原型繼承父類
        Surrogate.prototype = parent.prototype;
        // 這里就是實現子類的原型繼承，這手法是不是有點像上一回模擬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的繼承實現了，難解的地方我都寫了注釋，如果有分析錯的地方，請指正。如果感覺暈菜的話，可以跳過，。
這一回，主要聊了接口的模擬，淺談裝飾者模式，模擬了摻元類實現多親繼承，分析了下backbone的extend，如果上一回的underscore和extjs感覺還好的話，這回backbone的extend應該沒啥難度~~
下一回，咱主要聊一聊單例模式。
話說最近鐘漢良，蔣勁夫領銜的《我要上學啦》真人秀第一季over了，從第一期追劇追到最后，真是好玩吖，主題曲也勵志：如果能，重返17歲，插上翅膀你敢不敢高飛...

注：此系飛狐原創，轉載請注明出處

GPU云服務器云服務器 javascript專題系列 javascript深入系列飛狐 javascript設計模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86117.html

聽飛狐聊JavaScript設計模式系列12

摘要：，對組合對象執行的操作可以向下傳遞到葉子節點進行操作。組合模式之圖片庫圖片庫可以有選擇地隱藏或顯示圖片庫的全部或某一部分單獨的或是部分的。本回內容介紹上一回，聊了橋接模式，做了一道計算題；介一回，聊組合模式（Composite），官方描述組合模式將對象組合成樹形結構以表示部分-整體的層次結構，組合模式使得用戶對單個對象和組合對象的使用具有一致性。組合模式特性這里我理了一下，就組...

HitenDev 2019-08-19 17:13 評論0 收藏0
聽飛狐聊JavaScript設計模式系列15

摘要：介一回，聊策略模式，策略模式定義了一系列的算法，并將每一個算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨立于使用它的客戶而獨立變化。下一回，聊一聊的享元模式。本回內容介紹上一回，聊了聊鏈式編程，模擬了jQuery和underscore.js,并寫了一個遍歷多維數組的函數。介一回，聊策略模式（Strategy），策略模式定義了一系列的算法，并將每一個算法封裝起來，而且使它們...

guyan0319 2019-08-22 11:00 評論0 收藏0
聽飛狐聊JavaScript設計模式系列13

摘要：介一回聊狀態模式，官方描述允許一個對象在其內部狀態改變時改變它的行為。有限狀態機有限狀態機是一個非常有用的模型，可以模擬世界上大部分事物。這個是官方說法，簡單說，她有三個特征，狀態總數是有限的。，任一時刻，只處在一種狀態之中。本回內容介紹上一回聊了聊組合模式（Composite），用組合模式模擬了個圖片庫，聊了遞歸。介一回聊狀態模式（State），官方描述允許一個對象在其內部狀態改...

linkin 2019-08-19 17:17 評論0 收藏0
聽飛狐聊JavaScript設計模式系列06

本回內容介紹上一回聊到JS中模擬接口，裝飾者模式，摻元類，分析了backbone的繼承源碼，感覺還好吧！介一回，偶們來聊一下在JS單例模式(singleton)，單例模式其實運用很廣泛，比如：jquery，AngularJS，underscore吖蝦米的都是單例模式，來吧，直接開始咯： 1. 單例模式保證一個類只有一個實例，從全局命名空間里提供一個唯一的訪問點來訪問該對象。其實之前寫過的對象...

hiYoHoo 2019-08-21 10:45 評論0 收藏0
聽飛狐聊JavaScript設計模式系列02

摘要：本回內容介紹上一回聊到數據類型，簡單的過了一遍，包括個數組新特性等，這一回來聊聊對象，結合數組來實戰一些例子，在做題中成長，記憶會更深刻，來吧，開始咯創建實例的方式有兩種使用操作符后跟構造函數飛狐使用對象字面量表示法飛狐也可以飛狐這種寫法與本回內容介紹上一回聊到JS數據類型，簡單的過了一遍，包括9個數組新特性等，這一回來聊聊Object對象，結合數組來實戰一些例子，在做題中成長，記...

tangr206 2019-08-21 10:44 評論0 收藏0