模塊化簡(jiǎn)介第二章

放大模式or 寬放大模式(Loose augmentation)

如果一個(gè)模塊很大躁愿,必須分成幾個(gè)部分,或者一個(gè)模塊需要繼承另一個(gè)模塊杀捻,這時(shí)就有必要采用"放大模式"(augmentation)。

var module1 = (function (mod){
      mod.m3 = function () {
      //...
      };
      return mod;
      })(module1);

在瀏覽器環(huán)境中麻削,模塊的各個(gè)部分通常都是從網(wǎng)上獲取的,有時(shí)無(wú)法知道哪個(gè)部分會(huì)先加載舔示。如果采用上一節(jié)的寫法碟婆,第一個(gè)執(zhí)行的部分有可能加載一個(gè)不存在空對(duì)象,這時(shí)就要采用"寬放大模式"惕稻。

 var module1 = ( function (mod){
            //...
            return mod;
   })(window.module1 || {});

構(gòu)造函數(shù)

使用new操作符完成的構(gòu)造函數(shù)竖共,比如:

var Person = function(name) {
var name = name || 'leo'; // 私有變量,通過閉包訪問

return {
    // 暴露公開的成員
    setName: function (name) {
        name = name;
    },
    getName: function () {
        return name;
    }
};
}

var leo = new Person(); // Object{setName:  function, getName: function()}

console.log(leo.getName());

每次用的時(shí)候都要new一下俺祠,也就是說每個(gè)實(shí)例在內(nèi)存里都是一份copy公给。

引用全局變量

JavaScript有一個(gè)特性叫做隱式全局變量,不管一個(gè)變量有沒有用過蜘渣,JavaScript解釋器反向遍歷作用域鏈來(lái)查找整個(gè)變量的var聲明淌铐,如果沒有找到var,解釋器則假定該變量是全局變量蔫缸,如果該變量用于了賦值操作的話腿准,之前如果不存在的話,解釋器則會(huì)自動(dòng)創(chuàng)建它拾碌,這就是說在匿名閉包里使用或創(chuàng)建全局變量非常容易吐葱,不過比較困難的是,代碼比較難管理校翔,尤其是閱讀代碼的人看著很多區(qū)分哪些變量是全局的弟跑,哪些是局部的。

匿名函數(shù)里我們可以提供一個(gè)比較簡(jiǎn)單的替代方案防症,我們可以將全局變量當(dāng)成一個(gè)參數(shù)傳入到匿名函數(shù)然后使用孟辑,相比隱式全局變量,它又清晰又快蔫敲,我們來(lái)看一個(gè)例子:

function ($, YAHOO) {
// 這里饲嗽,我們的代碼就可以使用全局的jQuery對(duì)象了,YAHOO也是一樣
} (jQuery, YAHOO));

基本的Module模式

有時(shí)候可能不僅僅要使用全局變量奈嘿,而是也想聲明全局變量喝噪,如何做呢?我們可以通過匿名函數(shù)的返回值來(lái)返回這個(gè)全局變量指么,這也就是一個(gè)基本的Module模式酝惧,來(lái)看一個(gè)完整的代碼:

var blogModule = (function () {
var my = {}, privateName = "博客園";

function privateAddTopic(data) {
    // 這里是內(nèi)部處理代碼
}

my.Name = privateName;
my.AddTopic = function (data) {
    privateAddTopic(data);
};

return my;
} ());

上面的代碼聲明了一個(gè)全局變量blogModule榴鼎,并且?guī)в?個(gè)可訪問的屬性:blogModule.AddTopic和blogModule.Name,除此之外晚唇,其它代碼都在匿名函數(shù)的閉包里保持著私有狀態(tài)巫财。同時(shí)根據(jù)上面?zhèn)魅肴肿兞康睦樱覀円部梢院芊奖愕貍魅肫渌娜肿兞俊?/p>

Module擴(kuò)展方式

Module模式的一個(gè)限制就是所有的代碼都要寫在一個(gè)文件哩陕,但是在一些大型項(xiàng)目里平项,將一個(gè)功能分離成多個(gè)文件是非常重要的,因?yàn)榭梢远嗳撕献饕子陂_發(fā)悍及。再回頭看看上面的全局參數(shù)導(dǎo)入例子闽瓢,我們能否把blogModule自身傳進(jìn)去呢?答案是肯定的心赶,我們先將blogModule傳進(jìn)去扣讼,添加一個(gè)函數(shù)屬性,然后再返回就達(dá)到了我們所說的目的缨叫,上代碼:

var blogModule = (function (my) {
my.AddPhoto = function () {
    //添加內(nèi)部代碼
};
return my;
} (blogModule));

但是有一個(gè)問題椭符,這里擴(kuò)展的方法,好像無(wú)法調(diào)用函數(shù)內(nèi)部的私有變量耻姥,但是可以將一些需要的私有變量掛載到對(duì)象下销钝。

松耦合擴(kuò)展

上面的代碼盡管可以執(zhí)行,但是必須先聲明blogModule琐簇,然后再執(zhí)行上面的擴(kuò)展代碼蒸健,也就是說步驟不能亂,怎么解決這個(gè)問題呢婉商?我們來(lái)回想一下纵装,我們平時(shí)聲明變量的都是都是這樣的:var cnblogs = cnblogs || {} ;,確保cnblogs對(duì)象据某,在存在的時(shí)候直接用,不存在的時(shí)候直接賦值為{}诗箍,我們來(lái)看看如何利用這個(gè)特性來(lái)實(shí)現(xiàn)Module模式的任意加載順序:

var blogModule = (function (my) {
// 添加一些功能   

return my;
} (blogModule || {}));

這樣每個(gè)單獨(dú)分離的文件都保證這個(gè)結(jié)構(gòu)癣籽,那么我們就可以實(shí)現(xiàn)任意順序的加載,所以滤祖,這個(gè)時(shí)候的var就是必須要聲明的筷狼,因?yàn)椴宦暶鳎渌募x取不到的匠童。缺點(diǎn): 沒辦法重寫你的一些屬性或者函數(shù)埂材,也不能在初始化的時(shí)候就是用Module的屬性。

緊耦合擴(kuò)展

緊耦合擴(kuò)展限制了加載順序汤求,但是提供了我們重載的機(jī)會(huì)俏险,看如下例子:
var blogModule = (function (my) {
var oldAddPhotoMethod = my.AddPhoto;

my.AddPhoto = function () {
    // 重載方法严拒,依然可通過oldAddPhotoMethod調(diào)用舊的方法
};

return my;
} (blogModule));

通過這種方式,我們達(dá)到了重載的目的竖独,當(dāng)然如果你想在繼續(xù)在內(nèi)部使用原有的屬性裤唠,你可以調(diào)用oldAddPhotoMethod來(lái)用。

跨文件共享私有對(duì)象

如果一個(gè)module分割到多個(gè)文件的話莹痢,每個(gè)文件需要保證一樣的結(jié)構(gòu)种蘸,也就是說每個(gè)文件匿名函數(shù)里的私有對(duì)象都不能交叉訪問,那如果我們非要使用竞膳,那怎么辦呢航瞭?我們先看一段代碼:

var blogModule = (function (my) {
var _private = my._private = my._private || {},

    _seal = my._seal = my._seal || function () {
        delete my._private;
        delete my._seal;
        delete my._unseal;

    },

    _unseal = my._unseal = my._unseal || function () {
        my._private = _private;
        my._seal = _seal;
        my._unseal = _unseal;
    };

return my;
} (blogModule || {}));

任何文件都可以對(duì)他們的局部變量_private設(shè)屬性,并且設(shè)置對(duì)其他的文件也立即生效坦辟。一旦這個(gè)模塊加載結(jié)束刊侯,應(yīng)用會(huì)調(diào)用blogModule._seal()"上鎖",這會(huì)阻止外部接入內(nèi)部的_private长窄。如果這個(gè)模塊需要再次增生滔吠,應(yīng)用的生命周期內(nèi),任何文件都可以調(diào)用_unseal()”開鎖”挠日,然后再加載新文件疮绷。加載后再次調(diào)用_seal()”上鎖”。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嚣潜,一起剝皮案震驚了整個(gè)濱河市冬骚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌懂算,老刑警劉巖只冻,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異计技,居然都是意外死亡喜德,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門垮媒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)舍悯,“玉大人,你說我怎么就攤上這事睡雇∶瘸模” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵它抱,是天一觀的道長(zhǎng)秕豫。 經(jīng)常有香客問我,道長(zhǎng)观蓄,這世上最難降的妖魔是什么混移? 我笑而不...
    開封第一講書人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任祠墅,我火速辦了婚禮,結(jié)果婚禮上沫屡,老公的妹妹穿的比我還像新娘饵隙。我一直安慰自己,他們只是感情好沮脖,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開白布金矛。 她就那樣靜靜地躺著,像睡著了一般勺届。 火紅的嫁衣襯著肌膚如雪驶俊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,708評(píng)論 1 305
  • 那天免姿,我揣著相機(jī)與錄音饼酿,去河邊找鬼。 笑死胚膊,一個(gè)胖子當(dāng)著我的面吹牛故俐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播紊婉,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼药版,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了喻犁?” 一聲冷哼從身側(cè)響起槽片,我...
    開封第一講書人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎肢础,沒想到半個(gè)月后还栓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡传轰,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年剩盒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片慨蛙。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡辽聊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出股淡,到底是詐尸還是另有隱情,我是刑警寧澤廷区,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布唯灵,位于F島的核電站,受9級(jí)特大地震影響隙轻,放射性物質(zhì)發(fā)生泄漏埠帕。R本人自食惡果不足惜垢揩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望敛瓷。 院中可真熱鬧叁巨,春花似錦、人聲如沸呐籽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)狡蝶。三九已至庶橱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間贪惹,已是汗流浹背苏章。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留奏瞬,地道東北人枫绅。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像硼端,于是被迫代替她去往敵國(guó)和親并淋。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 作者 ben cherry 显蝌,譯者 魏楷聰 發(fā)布于 2015年01月20日 The module pattern ...
    那只大象閱讀 518評(píng)論 0 3
  • 《ijs》速成開發(fā)手冊(cè)3.0 官方用戶交流:iApp開發(fā)交流(1) 239547050iApp開發(fā)交流(2) 10...
    葉染柒丶閱讀 5,163評(píng)論 0 7
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,178評(píng)論 25 707
  • 九月以來(lái)预伺,陸陸續(xù)續(xù)迎來(lái)很多大事,雖說有一些是猝不及防的曼尊,但有一些是提前知道的酬诀。可自己還是沒有按照預(yù)訂的計(jì)劃那樣做好...
    糖豆多閱讀 200評(píng)論 0 1
  • 電影《功夫熊貓3》里通篇都在表達(dá)的一個(gè)核心思想骆撇。那就是成為你自己瞒御! 我來(lái)簡(jiǎn)述一下劇情:為了戰(zhàn)勝重返凡間復(fù)仇的靈界天...
    陳初見655閱讀 366評(píng)論 0 1