觀察者模式JS

余學(xué)文發(fā)布于2019-08-23 13:12 / 2801人閱讀

摘要：觀察者模式主要由一個(gè)目標(biāo)對(duì)象和一系列觀察者組成，如果目標(biāo)對(duì)象發(fā)生改變，目標(biāo)就會(huì)通知對(duì)應(yīng)的觀察者，每個(gè)觀察者接收到通知后做出自己的變化。一個(gè)目標(biāo)對(duì)象可以管理自己的觀察者并且具有通知的方法，下面我們用代碼來(lái)實(shí)現(xiàn)。

觀察者模式主要由一個(gè)目標(biāo)對(duì)象（Subject）和一系列觀察者（Observer）組成，如果目標(biāo)對(duì)象發(fā)生改變，目標(biāo)就會(huì)通知對(duì)應(yīng)的觀察者，每個(gè)觀察者接收到通知后做出自己的變化。一個(gè)目標(biāo)對(duì)象（Subject）可以管理自己的觀察者（Observer）,并且具有通知的方法，下面我們用代碼來(lái)實(shí)現(xiàn)。

// 觀察者列表,可以對(duì)觀察者進(jìn)行增加，修改等操作
// Subject會(huì)用到ObserverList來(lái)管理觀察者
function ObserverList() {
    this.observerList = [];
}

ObserverList.prototype.Add = function(obj){
    // body... 
    return this.observerList.push(obj);
};

ObserverList.prototype.Empty = function(){
    // body... 
    this.observerList = [];
};

ObserverList.prototype.Count = function(){
    // body... 
    return this.observerList.length;
};

ObserverList.prototype.Get = function(index){
    // body... 
    if(index > -1 && index < this.observerList.length) {
        return this.observerList[index]
    }
};

ObserverList.prototype.Insert = function(obj , index){
    // body... 
    var pointer = -1;

    if(index === 0) {
        this.observerList.unshift(obj);
    }
    if(index === this.observerList.length) {
        this.observerList.push(obj);
    }
    pointer = index;
    this.observerList.splice(index,0,obj);
    return pointer;
};

ObserverList.prototype.IndexOf = function(obj, startIndex){
    // body... 
    var i = startIndex, pointer = -1;

    while(i
目標(biāo)對(duì)象利用ObserverList來(lái)管理觀察者，并具有通知的方法
//目標(biāo)
function Subject() {
    this.observers = new ObserverList();
}

Subject.prototype.AddObserver = function(observer){
    this.observers.Add(observer)
};

Subject.prototype.RemoveObserver = function(observer){
    this.observers.RemoveIndexAt(this.observers.indexOf(observer, 0))
};

Subject.prototype.Notify = function(context){
    var observerCount = this.observers.Count()
    for (var i = observerCount - 1; i >= 0; i--) {
        // 收到通知后調(diào)用觀察者的Update方法
        this.observers.Get(i).Update(context)
    }
};
觀察者具有一個(gè)Update方法，每個(gè)觀察者根據(jù)自己的業(yè)務(wù)來(lái)重寫(xiě)Update方法，
function Observer() {
    this.Update = function() {
        console.log("默認(rèn)實(shí)現(xiàn)")
    }
}
最后實(shí)現(xiàn)一個(gè)extend方法，來(lái)擴(kuò)展對(duì)象
// 擴(kuò)展obj對(duì)象
function extend(extension, obj) {
    for(var key in extension) {
        obj[key] = extension[key];
    }
}
這樣，觀察者模式就實(shí)現(xiàn)了，下面我們用實(shí)際的例子來(lái)說(shuō)明一下觀察者模式的用法。



    
    Document


    
    
    
    
    
    
    



運(yùn)行后的效果大家可以自己去嘗試一下，新增的checkBox的勾選狀態(tài)會(huì)和第一個(gè)checkBox，也就是Subject保持一致。

云服務(wù)器 GPU云服務(wù)器 js觀察者模式視頻設(shè)計(jì)模式觀察者模式觀察者模式 php觀察者模式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99288.html

相關(guān)文章

JS設(shè)計(jì)模式之Obeserver（觀察者）模式、Publish/Subscribe（發(fā)布/訂閱）模式

摘要：觀察者模式定義設(shè)計(jì)模式中對(duì)的定義一個(gè)對(duì)象稱為維持一系列依賴于它觀察者的對(duì)象，將有關(guān)狀態(tài)的任何變更自動(dòng)通知給它們。如圖模式比較觀察者模式則多了一個(gè)類似于話題調(diào)度中心的流程，發(fā)布者和訂閱者解耦。 Obeserver（觀察者）模式定義《js設(shè)計(jì)模式》中對(duì)Observer的定義：一個(gè)對(duì)象（稱為subject）維持一系列依賴于它（觀察者）的對(duì)象，將有關(guān)狀態(tài)的任何變更自動(dòng)通知給它們。《設(shè)計(jì)模...

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

摘要：使用觀察者模式的好處支持簡(jiǎn)單的廣播通信，自動(dòng)通知所有已經(jīng)訂閱過(guò)的對(duì)象。總的來(lái)說(shuō)，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。 1. 介紹觀察者模式又叫發(fā)布訂閱模式（Publish/Subscribe），它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有的觀察者對(duì)象，使得它們能夠自動(dòng)更新自己。使用...

mist14 2019-08-21 18:19 評(píng)論0 收藏0
JS 設(shè)計(jì)模式十三（觀察者模式）

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

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

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

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

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

baishancloud 2019-08-23 16:53 評(píng)論0 收藏0
js設(shè)計(jì)模式 --- 發(fā)布訂閱模式(觀察者模式)

摘要：由主體和觀察者組成，主體負(fù)責(zé)發(fā)布事件，同時(shí)觀察者通過(guò)訂閱這些事件來(lái)觀察該主體。主體并不知道觀察者的任何事情，觀察者知道主體并能注冊(cè)事件的回調(diào)函數(shù)。總的來(lái)說(shuō)，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。發(fā)布訂閱模式發(fā)布訂閱模式又叫觀察者模式（Publish/Subscribe），它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，這個(gè)主題...

EasonTyler 2019-08-22 14:52 評(píng)論0 收藏0