js設(shè)計模式(一)

單例模式: 目的是創(chuàng)建全局唯一可用的對象

var createMask = function(){
   return document.body.appendChild( document.createElement(div));
}
 
$( 'button' ).click( function(){
   var mask  = createMask();
   mask.show();
})
// 缺點: 那么每次調(diào)用createMask都會創(chuàng)建一個新的div,
var mask;
var createMask = function(){
if ( mask ) {
    return mask;
}else{
    mask = document,body.appendChild( document.createElement(div) );
    return mask;
    } 
}
//這里函數(shù)內(nèi)改變了外界變量mask,而且mask是全局變量并不是非需不可趋箩;
var getSingle = (function(){
    var single;
    return function(fn){
        return single || (single = fn.apply(this, arguments));
    }
})()
// 使用
// 無論執(zhí)行多少次createSingleDiv(), 都只返回同一個div
var createSingleDiv = getSingle(function(){
    return document.createElement('div')
})
/**
 * 這種方法本質(zhì)上是緩存函數(shù)結(jié)果是鬼,并且限制函數(shù)只執(zhí)行一次。
 * 這里使用單例主要是針對那些全局只有一個就可以的對象,多于1個就浪費(fèi)腮鞍。
 */

訂閱-發(fā)布者模式 (觀察者模式)

觀察者模式又叫發(fā)布訂閱模式(Publish/Subscribe),它定義了一種一對多的關(guān)系莹菱,讓多個觀察者對象同時監(jiān)聽某一個主題對象移国,這個主題對象的狀態(tài)發(fā)生變化時就會通知所有的觀察者對象,使得它們能夠自動更新自己道伟。


使用觀察者模式的好處:
  1. 支持簡單的廣播通信迹缀,自動通知所有已經(jīng)訂閱過的對象。
  2. 頁面載入后目標(biāo)對象很容易與觀察者存在一種動態(tài)關(guān)聯(lián)蜜徽,增加了靈活性祝懂。
  3. 目標(biāo)對象與觀察者之間的抽象耦合關(guān)系能夠單獨(dú)擴(kuò)展以及重用。

publish/subscribe 模式使用了一個主題/事件通道拘鞋,這個通道介于希望接收到通知(訂閱者)和激活事件的對象(發(fā)布者)之間砚蓬。目的是避免訂閱者和發(fā)布者之間產(chǎn)生依賴關(guān)系

/**
 * publish/subscribe 實現(xiàn)
 * topics = [
 *             { topic1: [ {token: '', func: func}, {token: '', func: func}, ...]},
 *             { topic2: [ {token: '', func: func}, {token: '', func: func}, ...]},
 *          ]
 */
var pubsub = {};
(function(q){
    var topics = {},
        subUid = -1;
    //發(fā)布或廣播事件,包含特定的topics名稱和參數(shù)
    q.publish = function(topic,args){
        if(!topics[topic]){
            return false;
        }
        var subscribers = topics[topic],
            len = subscribers ? subscribers.length : 0;
        while(len--){
            subscribers[len].func(topic,args);
        }
        return this;
    };
    //通過特定的名稱和回調(diào)函數(shù)訂閱事件盆色,topic/event觸發(fā)時執(zhí)行事件
    q.subscribe = function( topic, func){
        if(!topics[topic]){
            topics[topic] = [];
        }
        var token = (++subUid).toString();
        topics[topic].push({
            token: token,
            func: func
        })
        return token;
    };
    //基于訂閱上的標(biāo)記引用灰蛙,通過特定topic取消訂閱
    q.unsubscribe = function(token) {
        for(var m in topics){
            if(topics[m]){
                for(var i = 0, j = topics[m].legnth; i < j; i++){
                    if(topics[m][i].token == token){
                        topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return this;
    };
}(punsub))
/**
 * * 使用上述實現(xiàn)示例. 消息處理程序
 */
var messageLogger = function( topics, data){
    console.log('Logging: ' + topics + ":" + data);
}
//訂閱者監(jiān)聽訂閱的topic,一旦該topic廣播一個通知隔躲,訂閱者就調(diào)用回調(diào)函數(shù)
 
var subscription = pubsub.subscribe('inbox/newMessage', messageLogger);
//發(fā)布者負(fù)責(zé)發(fā)布程序感興趣的topic或通知
pubsub.publish('inbox/newMessage', 'hello world');
// or
pubsub.publish('inbox/newMessage', ['test','a','b','c']);
//or
pubsub.publish('inbox/newMessage', { sender: 'hello@google.com', body: 'hey again!'})
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末摩梧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宣旱,更是在濱河造成了極大的恐慌仅父,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浑吟,死亡現(xiàn)場離奇詭異笙纤,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)组力,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進(jìn)店門粪糙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人忿项,你說我怎么就攤上這事蓉冈〕俏瑁” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵寞酿,是天一觀的道長家夺。 經(jīng)常有香客問我,道長伐弹,這世上最難降的妖魔是什么拉馋? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮惨好,結(jié)果婚禮上煌茴,老公的妹妹穿的比我還像新娘。我一直安慰自己日川,他們只是感情好蔓腐,可當(dāng)我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著龄句,像睡著了一般回论。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上分歇,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天傀蓉,我揣著相機(jī)與錄音,去河邊找鬼职抡。 笑死葬燎,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缚甩。 我是一名探鬼主播谱净,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蹄胰!你這毒婦竟也來了岳遥?” 一聲冷哼從身側(cè)響起奕翔,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤裕寨,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后派继,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體宾袜,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年驾窟,在試婚紗的時候發(fā)現(xiàn)自己被綠了庆猫。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡绅络,死狀恐怖月培,靈堂內(nèi)的尸體忽然破棺而出嘁字,到底是詐尸還是另有隱情,我是刑警寧澤杉畜,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布纪蜒,位于F島的核電站,受9級特大地震影響此叠,放射性物質(zhì)發(fā)生泄漏纯续。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一灭袁、第九天 我趴在偏房一處隱蔽的房頂上張望猬错。 院中可真熱鬧,春花似錦茸歧、人聲如沸倦炒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽析校。三九已至,卻和暖如春铜涉,著一層夾襖步出監(jiān)牢的瞬間智玻,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工芙代, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留吊奢,地道東北人。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓纹烹,卻偏偏與公主長得像页滚,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子铺呵,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,762評論 2 345

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理裹驰,服務(wù)發(fā)現(xiàn),斷路器片挂,智...
    卡卡羅2017閱讀 134,599評論 18 139
  • 命名空間 單例模式是JavaScript中最常見的一種模式幻林,通過這種模式可以為我們提供一個命名空間,例如jQuer...
    kMacro閱讀 875評論 2 10
  • 參考(JAVASCRIPT設(shè)計模式 張容銘)1.需求:驗證表單音念,僅驗證用戶名沪饺,郵箱,密碼大部分人首先想到的就是下面...
    向布谷鳥說早安閱讀 273評論 0 1
  • 設(shè)計模式匯總 一闷愤、基礎(chǔ)知識 1. 設(shè)計模式概述 定義:設(shè)計模式(Design Pattern)是一套被反復(fù)使用整葡、多...
    MinoyJet閱讀 3,903評論 1 15
  • 9月份,大盤弱勢依舊讥脐,滬指在3000點附近震蕩遭居。伴隨成交量的極度萎縮啼器,持幣觀望在投資者的策略中占了主導(dǎo)地位,對于即...
    陽光下的咖啡豆閱讀 206評論 0 1