JS觀察者模式

zacklee 發布于2019-08-26 11:36 / 1576人閱讀

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

觀察者模式

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

代碼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("你沒綁定這個事件");
        return;
    }
    var args = Array.prototype.slice.call(arguments, 1); ////args為獲得除了eventName后面的參數(最后被用作注冊事件的參數)
    //arguments并不是真正的數組對象，只是與數組類似而已，所以它并沒有slice這個方法
    //Array.prototype.slice.call(arguments, 1)可以理解成是讓arguments轉換成一個數組對象，讓arguments具有slice()方法。
    //要是直接寫arguments.slice(1)會報錯
    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中調用它時傳進來的參數
        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); } } }());

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

2)es6中的Promise的實現過程也使用了觀察者模式。

云服務器 GPU云服務器 js觀察者模式視頻設計模式觀察者模式觀察者模式 php觀察者模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107217.html

JS設計模式之Obeserver（觀察者）模式、Publish/Subscribe（發布/訂閱）模式

摘要：觀察者模式定義設計模式中對的定義一個對象稱為維持一系列依賴于它觀察者的對象，將有關狀態的任何變更自動通知給它們。如圖模式比較觀察者模式則多了一個類似于話題調度中心的流程，發布者和訂閱者解耦。 Obeserver（觀察者）模式定義《js設計模式》中對Observer的定義：一個對象（稱為subject）維持一系列依賴于它（觀察者）的對象，將有關狀態的任何變更自動通知給它們。《設計模...

荊兆峰 2019-08-26 13:37 評論0 收藏0
JS 觀察者模式

摘要：使用觀察者模式的好處支持簡單的廣播通信，自動通知所有已經訂閱過的對象。總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。 1. 介紹觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己。使用...

mist14 2019-08-21 18:19 評論0 收藏0
JS 設計模式十三（觀察者模式）

摘要：觀察者模式對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更新。具體主題角色在具體主題內部狀態改變時，給所有登記過的觀察者發出通知。觀察者模式對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更新。觀察者要素 1.抽象主題(Subject)角色：把所有對觀察者對象的引用保存在一個集合中，每個...

shleyZ 2019-08-19 18:24 評論0 收藏0
簡單理解觀察者模式(pub/sub)在前端中的應用

摘要：概念觀察者模式被廣泛地應用于客戶端編程中。所有的瀏覽器事件，等都是使用觀察者模式的例子。在觀察者模式中，一個對象訂閱另一個對象的指定活動并得到通知，而不是調用另一個對象的方法。此外，觀察者模式還可用于實現數據綁定。概念觀察者模式被廣泛地應用于JavaScript客戶端編程中。所有的瀏覽器事件（mouseover，keypress等）都是使用觀察者模式的例子。這種模式的另一個名字叫自...

guyan0319 2019-08-23 12:10 評論0 收藏0
JS每日一題:設計模式-如何理解觀察者(發布訂閱)模式?

摘要：期設計模式如何理解觀察者發布訂閱模式定義觀察者模式又叫發布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己生活實例理解你今天去看一個 20190411期設計模式-如何理解觀察者(發布訂閱)模式? 定義: 觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一...

baishancloud 2019-08-23 16:53 評論0 收藏0
js設計模式 --- 發布訂閱模式(觀察者模式)

摘要：由主體和觀察者組成，主體負責發布事件，同時觀察者通過訂閱這些事件來觀察該主體。主體并不知道觀察者的任何事情，觀察者知道主體并能注冊事件的回調函數。總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。發布訂閱模式發布訂閱模式又叫觀察者模式（Publish/Subscribe），它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題...

EasonTyler 2019-08-22 14:52 評論0 收藏0