javascript設計模式——觀察者模式

觀察者模式:又稱作發(fā)布-訂閱者模式耸别,定義了一種依賴關系,解決了主體對象與觀察者之間功能的耦合县钥。

代碼::定義觀察者類秀姐,實現(xiàn)事件的監(jiān)聽,觸發(fā)和取消若贮。

  // 定義觀察者類
    var Observer = (function(){
      var _messages = []
      return {
        // 注冊信息接口
        regist: function(type, fn){
          // 事件如果沒注冊省有,初始化事件隊列痒留,否則push到隊列中
          if (typeof _messages[type] === 'undefined') {
            _messages[type] = [fn]
          } else {
            _messages[type].push(fn)
          }
        },
        // 發(fā)布信息接口
        fire: function(type, args){
          // 該消息沒有注冊,結束
          if (!_messages[type]) {
            return
          }
          var events = {
            type: type,
            args: args || {}
          },
          i = 0,
          len = _messages[type].length
          for(;i<len;i++) {
            _messages[type][i].call(this, events)
          }
        },
        // 移除信息接口
        remove: function(type, fn){
          if (_messages[type] instanceof Array) {
            var  i = _messages[type].length - 1
            for(; i >= 0; i--) {
              _messages[type][i] === fn && _messages[type].splice(i, 1)
            }
          }
        }
      }
    })()
    // 例子:你來學校上學锥咸,課堂上有老師和學生,老師向學生提問细移,學生是提問對象搏予,因此他們是訂閱者,同時學生也有對問題的思考和回答問題的動作
    var Student = function(result) {
      var that = this
      that.result = result
      that.say = function(){
        console.log(that.result)
      }
    }
    Student.prototype.answer = function(question){
      Observer.regist(question, this.say)
    }
    // 學生在睡覺弧轧,不能回答問題
    Student.prototype.sleep = function(question){
      Observer.remove(question, this.say)
    }

    var Teacher = function(){}
    Teacher.prototype.ask = function(question){
      console.log('問題是:' + question)
      Observer.fire(question)
    }

    var student1 = new Student('學生1回答問題')
    var student2 = new Student('學生2回答問題')
    var student3 = new Student('學生3回答問題')

    student1.answer('什么是設計模式')
    student1.answer('簡述觀察者模式')
    student2.answer('什么是設計模式')
    student3.answer('什么是設計模式')
    student3.answer('簡述觀察者模式')
    student3.sleep('簡述觀察者模式')

    var teacher = new Teacher()
    teacher.ask('什么是設計模式')
    teacher.ask('簡述觀察者模式')
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末雪侥,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子精绎,更是在濱河造成了極大的恐慌速缨,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件代乃,死亡現(xiàn)場離奇詭異旬牲,居然都是意外死亡,警方通過查閱死者的電腦和手機搁吓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門原茅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人堕仔,你說我怎么就攤上這事擂橘。” “怎么了摩骨?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵通贞,是天一觀的道長。 經(jīng)常有香客問我恼五,道長昌罩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任灾馒,我火速辦了婚禮峡迷,結果婚禮上,老公的妹妹穿的比我還像新娘你虹。我一直安慰自己绘搞,他們只是感情好,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布傅物。 她就那樣靜靜地躺著夯辖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪董饰。 梳的紋絲不亂的頭發(fā)上蒿褂,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天圆米,我揣著相機與錄音,去河邊找鬼啄栓。 笑死娄帖,一個胖子當著我的面吹牛,可吹牛的內容都是我干的昙楚。 我是一名探鬼主播近速,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼堪旧!你這毒婦竟也來了削葱?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤淳梦,失蹤者是張志新(化名)和其女友劉穎析砸,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體爆袍,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡首繁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了陨囊。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛮瞄。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖谆扎,靈堂內的尸體忽然破棺而出挂捅,到底是詐尸還是另有隱情,我是刑警寧澤堂湖,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布闲先,位于F島的核電站,受9級特大地震影響无蜂,放射性物質發(fā)生泄漏伺糠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一斥季、第九天 我趴在偏房一處隱蔽的房頂上張望训桶。 院中可真熱鬧,春花似錦酣倾、人聲如沸舵揭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽午绳。三九已至,卻和暖如春映之,著一層夾襖步出監(jiān)牢的瞬間拦焚,已是汗流浹背蜡坊。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留赎败,地道東北人秕衙。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像僵刮,于是被迫代替她去往敵國和親据忘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內容