JS觀察者模式

zacklee 發(fā)布于2019-08-26 11:36 / 1598人閱讀

摘要：觀察者模式觀察者模式在的學(xué)習(xí)過程中很重要，尤其是最近幾年框架的發(fā)展。觀察者模式很好的體現(xiàn)了松耦合原則和單一職責(zé)原則。觀察者模式由主體和觀察者組成，主體負(fù)責(zé)發(fā)布事件，觀察者通過訂閱事件來觀察主體。

觀察者模式

觀察者模式在JS的學(xué)習(xí)過程中很重要，尤其是最近幾年MV*框架的發(fā)展。
觀察者模式很好的體現(xiàn)了松耦合(Loose coupling)原則和單一職責(zé)原則。
觀察者模式
它定義了對(duì)象間一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴它的對(duì)象都將得到通知。
觀察者模式由主體和觀察者組成，主體負(fù)責(zé)發(fā)布事件，觀察者通過訂閱事件來觀察主體。
主體并不知道觀察者的任何事情，觀察者知道主體并能注冊(cè)事件的回調(diào)函數(shù)。

代碼1：

function Emitter(){
    this._listerner={};//自定義事件名
}
Emitter.prototype.bind=function(eventName,handler){
//    var listenersArr=this._listerner[eventName]||[];
//    listenersArr.push(handler);
//    this._listerner[eventName]=listenersArr;        
    if(!this._listerner.hasOwnProperty(eventName)){
        this._listerner[eventName]=[];
    }
    this._listerner[eventName].push(handler);
}
Emitter.prototype.trigger=function(eventName){
    if (!this._listerner.hasOwnProperty(eventName)) {
        console.log("你沒綁定這個(gè)事件");
        return;
    }
    var args = Array.prototype.slice.call(arguments, 1); ////args為獲得除了eventName后面的參數(shù)(最后被用作注冊(cè)事件的參數(shù))
    //arguments并不是真正的數(shù)組對(duì)象，只是與數(shù)組類似而已，所以它并沒有slice這個(gè)方法
    //Array.prototype.slice.call(arguments, 1)可以理解成是讓arguments轉(zhuǎn)換成一個(gè)數(shù)組對(duì)象，讓arguments具有slice()方法。
    //要是直接寫arguments.slice(1)會(huì)報(bào)錯(cuò)
    this._listerner[eventName].forEach(function(callback){
        callback.call(this,args);//通過這種方法可以傳參
    });
}
function handler1(){
    console.log("第一次綁定");
    //console.log(arguments);
    Array.prototype.forEach.call(arguments,function(item){//arguments.forEach(function(item))，arguments為上面trigger中調(diào)用它時(shí)傳進(jìn)來的參數(shù)
        console.log(item);
    })
}
function handler2(){
    console.log("第二次綁定");
}
function handler3(){
    console.log("第三次綁定");
}
var emitter=new Emitter();
emitter.bind("selfEvent",handler1);
emitter.bind("selfEvent",handler2);
emitter.bind("selfEvent2",handler3);
emitter.trigger("selfEvent",233333333);

代碼2(下面這段來自stackoverflow)：

//model
function Book(name,isbn){
    this.name=name;
    this.isbn=isbn;
}
function BookCollection(books){
    this.books=books;
}
BookCollection.prototype.addBook=function(book){
    this.books.push(book);
    $.publish("book-added",book);
    return book;
}
BookCollection.prototype.removeBook=function(book){
    var removed;
    if(typeof book==="number"){
        removed=this.books.splice(book,1);
    }
    for(var i=0;i"+book.name+"

"); } return { init:function(){ $.subscribe("book-removed",removeBook); $.subscribe("book-added",addBook); } } }());

應(yīng)用：
1) angularjs的雙向數(shù)據(jù)綁定中，就涉及到了這個(gè)設(shè)計(jì)模式。
angularjs的雙向數(shù)據(jù)綁定主要是利用臟檢查來完成的。但是如何把一個(gè)model綁定到多個(gè)view就是利用觀察者模式來做的。

2)es6中的Promise的實(shí)現(xiàn)過程也使用了觀察者模式。