JavaScript觀察者模式

時間 2019-12-04

原文原文鏈接

觀察者模式
觀察者模式又叫發佈訂閱模式（Publish/Subscribe），它定義了一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知全部的觀察者對象，使得它們可以自動更新本身。
* 它分爲2個角色：（1）觀察者  （2）被觀察者

* 觀察者模式的目的：對程序的內在變化進行觀察,當其有變化的時候，你能夠得知,而且能夠作出相應的反應。
如今咱們經過一個需求來學習該模式：模擬訂閱者和報社之間的關係

在這個過程當中：實際的操做分爲(推模式,拿模式)

（1）推送-->長鏈接技術
（2）拿模式-->定時去後臺去取得
使用代碼實現以下：
（1）發佈類

//發佈類
function BusinessOne(name){
    this.name=name;
    //訂閱者集合
    this.subscribers=new Array();
}

（2）擴展一個發佈者的發佈消息的方法（推模式）javascript

//發佈者的發送消息的方法(推模式)
BusinessOne.prototype.delive=function (news) {
    var self=this;
    //給每個訂閱者發佈消息
    this.subscribers.forEach(function (fn) {
        //調用接受者處理信息的函數
                  fn(news,self);
    })
}

（3）擴展公共訂閱的函數,和取消訂閱的函數java

訂閱的函數：設計模式

Function.prototype.subscribe=function (publisher) {
    var that=this;
    //some 訪問數組度i型而且以參數的形式傳回回調函數中
    //只要至少有一次返回是true那麼some就是true
    var alreadyExists=publisher.subscribers.some(function (el) {
        if(el==that){
            //處理不能重複訂閱的功能
            return ;
        }
    });
    //沒用訂閱你就能夠訂閱
    if(!alreadyExists){
        publisher.subscribers.push(that);
    }
    return this;
}

取消的函數：

Function.prototype.unsubscribe =function (publisher) {
    var that = this;
    publisher.subscribers=publisher.subscribers.filter(function (el) {//過濾的實質是返回除開與當前對象相等的其他所用的對象集合
        if(el!==that){
            return el;
        }
    });
    return this;
}

（4）建立發佈的實例

//建立發佈者的實例
var b1 = new BusinessOne("CCTV");
var b2 = new BusinessOne("中國國防部報社");

（5）發佈部分數組

（5.1）使用門面模式--針對各瀏覽器的事件綁定兼容問題瀏覽器

function addEventFacade(el,type,fn) {
    if(window.addEventListener){
        //firefox
        el.addEventListener(type,fn);
    }else if(window.attachEvent){
        //使用是IE
       el.attachEvent("on"+type,fn);
    }else {
        el["on"+type] = fn;
    }
}

（5.2）建立主應用函數函數

var inint=function () {
    //建立觀察者
    var pageOne=function (news) {
        document.getElementById("info").value="我發現了： "+"["+arguments[1].name+"]發來的信息--->"+news
    };
    //訂閱1
    pageOne.subscribe(b1).subscribe(b2);
    addEventFacade(document.getElementById("cctv"),"click",function () {
        b1.delive(document.getElementById("cctvText").value);
    })
    //訂閱2
    addEventFacade(document.getElementById("gfb"),"click",function () {
        b2.delive(document.getElementById("gfbText").value);
    })
}

最後，訂閱者界面學習

<body onload="inint()">
<div id="div01"></div>
<script type="text/javascript" src="observer.js"></script>
<input type="button" value="CCTV發送" id="cctv">
<input type="text" id="cctvText">
<br><br><br>
<input type="button" value="國防部報社發送" id="gfb">
<input type="text" id="gfbText">
<br><br><br>
<textarea id="info" cols="60" rows="20"></textarea>
<script src="Js/設計模式第三部分/觀察者模式/lib.js"></script>
<script src="Js/設計模式第三部分/觀察者模式/觀察者模式.js"></script>
</body>

效果爲：this

（1）cctv模塊的spa

（2）gfb的效果爲：firefox

補充：上述用到的forEach方法和filter方法代碼爲：

    Function.prototype.method = function(name, fn) {
      this.prototype[name] = fn;
      return this;
    };
    if (!Array.prototype.forEach) { 
      Array.method('forEach', function(fn, thisObj) {
        var scope = thisObj || window;
        for ( var i = 0;len < this.length; ++i ) {
           //這樣寫不是簡單的函數調用,是在函數調用的同事把this從新定位
           fn.call(scope, this[i], i, this);
        }
      });
    }
    //Array過濾器
    if (!Array.prototype.filter ) {
      Array.method('filter', function(fn, thisObj) {
        var scope = thisObj || window;
        var a = [];
        for ( var i = 0;i < this.length; ++i ) {
              //看看過濾函數,真留下來,假的刪除
              if ( !fn.call(scope, this[i], i, this) ) {//過濾的實質是返回除開與當前對象相等的其他所用的對象集合
                   continue;
              }
              a.push(this[i]);
        }
        //返回新的數組
        return a;
      });
    }