資訊專欄INFORMATION COLUMN
摘要：這一回，主要聊了接口的模擬，淺談裝飾者模式，模擬了摻元類實(shí)現(xiàn)多親繼承，分析了下的，如果上一回的和感覺還好的話，這回的應(yīng)該沒啥難度下一回，咱主要聊一聊單例模式。
本回內(nèi)容介紹
上一回聊到JS的類的模擬，繼承，分析了nodejs，extjs，jquery，underscore的繼承源碼。
介一回，偶們來聊一下在JS中模擬接口，摻元類，裝飾者模式，有些盆友可能用過ES6或者TypeScript的，知道在ES6里已經(jīng)有interface，在es5中呢，只能靠模擬了，來吧，開始咯~
1. 接口模式接口模式，主要是模擬java接口檢測(cè)函數(shù)，確保接口的實(shí)現(xiàn)類必須實(shí)現(xiàn)接口中的方法：
/**
* 參數(shù)1:接口的名字，類型：string
* 參數(shù)2:方法名稱的集合，類型：array
*/
var Interface = function(name,methods){
// 判斷接口參數(shù)的個(gè)數(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
這就是一個(gè)接口的模擬了，參考JavaScript設(shè)計(jì)模式上的例子，做了些修改，把一些不好理解的地方都詳細(xì)的分析了，應(yīng)該感覺還好吧。如果感覺吃力的話，可能是對(duì)接口的概念不是很了解，沒關(guān)系，后面聊其他設(shè)計(jì)模式的時(shí)候，會(huì)常用到接口。這里咱再升華一下，在接口模式的基礎(chǔ)上再寫點(diǎn)內(nèi)容，聊聊裝飾者模式。
（注：這里投拋異常的英文句子都是我自己寫的，英文不好，如果有單詞，語(yǔ)法錯(cuò)誤，請(qǐng)見諒！）
2. 裝飾者模式
裝飾者模式，給對(duì)象動(dòng)態(tài)添加職責(zé)的方式稱為裝飾者(decorator)模式。
這里我們接著接口的例子來，上面的代碼就不復(fù)制了，這里接著寫，繼續(xù)把大衛(wèi)給玩兒壞。
var M20 = function(o){ // 這里定義一個(gè)裝飾類
var str = "20多歲的時(shí)候,";
// o是傳入的對(duì)象，調(diào)用傳入對(duì)象的方法，加以裝飾
this.eat = function(){
return str + o.eat()+",肥得很！";
};
this.drink = function(){
return str + o.drink()+",就是個(gè)水桶！";
};
this.coding = function(){
return str + o.coding()+",代碼又寫得撇！";
};
}
alert(new M20(david).eat()); // 20多歲的時(shí)候,大衛(wèi)是個(gè)大胖子，一天只曉得吃,肥得很！
alert(new M20(david).drink()); // 20多歲的時(shí)候,大衛(wèi)除了吃就是喝,就是個(gè)水桶！
alert(new M20(david).coding()); // 20多歲的時(shí)候,寫代碼吧，大衛(wèi),代碼又寫得撇！
這個(gè)例子應(yīng)該很好理解吧，（注：這個(gè)代碼是接著上邊兒接口例子的代碼噢），后面我們還會(huì)用到裝飾者模式做一些復(fù)雜的例子。
先裝個(gè)逼，再繼續(xù)，最近沒啥鐘漢良的新戲，只好看他的老戲《天涯明月刀》，以前吳岱融版本的《邊城浪子》也好看，都是經(jīng)典的傅紅雪。
這一回講的內(nèi)容不多，就一個(gè)接口模式，一個(gè)裝飾者模式的入門級(jí)示例，
下面的內(nèi)容就是寫一個(gè)摻元類，算是對(duì)上一回的一個(gè)復(fù)習(xí)吧。
3. 摻元類
摻元類：也是繼承的一種，這里就簡(jiǎn)單的模擬一下c++的多親繼承，帥狐show time，just do it：
// 定義一個(gè)摻元類，o是傳入的子類對(duì)象
function Mixin(o) {
// copy聊柯里化的時(shí)候?qū)戇^的代碼，眼熟吧
var _slice = Array.prototype.slice;
????var args = _slice.call(arguments,1);
// 跟接口有點(diǎn)類似，從第二個(gè)參數(shù)開始遍歷
????for (var i=0; i
難度不大吧，當(dāng)然這里只是簡(jiǎn)單的實(shí)現(xiàn)，代碼寫得不嚴(yán)謹(jǐn)。
在網(wǎng)上看到有JSer說："Backbone的源碼廣泛使用摻元類"，以前玩過這個(gè)框架，但在工作項(xiàng)目中沒有用過Backbone（這是一個(gè)依賴jquery，underscore.js的MVC框架），看到這哥們兒說的話后，就好奇想看看源碼，我們就簡(jiǎn)單的分析下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的方法，這里是判斷傳入的對(duì)象是否存在
if (protoProps && _.has(protoProps, "constructor")) {
// protoProps.constructor是傳入對(duì)象的構(gòu)造器
child = protoProps.constructor;
} else {
// 這一步是對(duì)象冒充繼承，但是要注意對(duì)象冒充只能繼承構(gòu)造里的信息，不能繼承原型.
child = function(){ return parent.apply(this, arguments); };
}
// 這個(gè)_.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;
// 這里就是實(shí)現(xiàn)子類的原型繼承，這手法是不是有點(diǎn)像上一回模擬Extjs繼承的手法
child.prototype = new Surrogate;
if (protoProps) _.extend(child.prototype, protoProps);
// 定義一個(gè)屬性保存父類的原型，跟上一回的模擬ExtJS繼承像吧.
child.__super__ = parent.prototype;
return child;
};
// 給model, collection, router, view, history都加上繼承.
Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;
這個(gè)就是backbone的繼承實(shí)現(xiàn)了，難解的地方我都寫了注釋，如果有分析錯(cuò)的地方，請(qǐng)指正。如果感覺暈菜的話，可以跳過，。
這一回，主要聊了接口的模擬，淺談裝飾者模式，模擬了摻元類實(shí)現(xiàn)多親繼承，分析了下backbone的extend，如果上一回的underscore和extjs感覺還好的話，這回backbone的extend應(yīng)該沒啥難度~~
下一回，咱主要聊一聊單例模式。
話說最近鐘漢良，蔣勁夫領(lǐng)銜的《我要上學(xué)啦》真人秀第一季over了，從第一期追劇追到最后，真是好玩吖，主題曲也勵(lì)志：如果能，重返17歲，插上翅膀你敢不敢高飛...
注：此系飛狐原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86117.html
摘要：，對(duì)組合對(duì)象執(zhí)行的操作可以向下傳遞到葉子節(jié)點(diǎn)進(jìn)行操作。組合模式之圖片庫(kù)圖片庫(kù)可以有選擇地隱藏或顯示圖片庫(kù)的全部或某一部分單獨(dú)的或是部分的。 本回內(nèi)容介紹 上一回，聊了橋接模式，做了一道計(jì)算題；介一回，聊組合模式（Composite），官方描述組合模式將對(duì)象組合成樹形結(jié)構(gòu)以表示部分-整體的層次結(jié)構(gòu)，組合模式使得用戶對(duì)單個(gè)對(duì)象和組合對(duì)象的使用具有一致性。 組合模式特性 這里我理了一下，就組...
摘要：介一回，聊策略模式，策略模式定義了一系列的算法，并將每一個(gè)算法封裝起來，而且使它們還可以相互替換。策略模式讓算法獨(dú)立于使用它的客戶而獨(dú)立變化。下一回，聊一聊的享元模式。 本回內(nèi)容介紹 上一回，聊了聊鏈?zhǔn)骄幊?，模擬了jQuery和underscore.js,并寫了一個(gè)遍歷多維數(shù)組的函數(shù)。介一回，聊策略模式（Strategy），策略模式定義了一系列的算法，并將每一個(gè)算法封裝起來，而且使它們...
摘要：介一回聊狀態(tài)模式，官方描述允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變時(shí)改變它的行為。有限狀態(tài)機(jī)有限狀態(tài)機(jī)是一個(gè)非常有用的模型，可以模擬世界上大部分事物。這個(gè)是官方說法，簡(jiǎn)單說，她有三個(gè)特征，狀態(tài)總數(shù)是有限的。，任一時(shí)刻，只處在一種狀態(tài)之中。 本回內(nèi)容介紹 上一回聊了聊組合模式（Composite），用組合模式模擬了個(gè)圖片庫(kù)，聊了遞歸。介一回聊狀態(tài)模式（State），官方描述允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改...
本回內(nèi)容介紹 上一回聊到JS中模擬接口，裝飾者模式，摻元類，分析了backbone的繼承源碼，感覺還好吧！ 介一回，偶們來聊一下在JS單例模式(singleton)，單例模式其實(shí)運(yùn)用很廣泛，比如：jquery，AngularJS，underscore吖蝦米的都是單例模式，來吧，直接開始咯： 1. 單例模式 保證一個(gè)類只有一個(gè)實(shí)例，從全局命名空間里提供一個(gè)唯一的訪問點(diǎn)來訪問該對(duì)象。其實(shí)之前寫過的對(duì)象...
摘要：本回內(nèi)容介紹上一回聊到數(shù)據(jù)類型，簡(jiǎn)單的過了一遍，包括個(gè)數(shù)組新特性等，這一回來聊聊對(duì)象，結(jié)合數(shù)組來實(shí)戰(zhàn)一些例子，在做題中成長(zhǎng)，記憶會(huì)更深刻，來吧，開始咯創(chuàng)建實(shí)例的方式有兩種使用操作符后跟構(gòu)造函數(shù)飛狐使用對(duì)象字面量表示法飛狐也可以飛狐這種寫法與 本回內(nèi)容介紹 上一回聊到JS數(shù)據(jù)類型，簡(jiǎn)單的過了一遍，包括9個(gè)數(shù)組新特性等，這一回來聊聊Object對(duì)象，結(jié)合數(shù)組來實(shí)戰(zhàn)一些例子，在做題中成長(zhǎng)，記...
閱讀 1275·2023-04-26 01:38
閱讀 1472·2021-11-15 11:39
閱讀 3264·2021-09-22 15:43
閱讀 2659·2019-08-30 15:55
閱讀 2059·2019-08-30 14:17
閱讀 2861·2019-08-29 14:16
閱讀 3072·2019-08-26 18:36
閱讀 2616·2019-08-26 12:19
