JS設(shè)計(jì)模式-觀察者模式

Markxu 發(fā)布于2019-08-21 16:54 / 2178人閱讀

摘要：觀察者又稱發(fā)布訂閱模式定義了對象間的一種一對多的依賴關(guān)系，以便一個(gè)對象的狀態(tài)發(fā)生變化時(shí)，所有依賴于它的對象都得到通知并自動刷新。

觀察者（又稱發(fā)布訂閱）模式定義了對象間的一種一對多的依賴關(guān)系，以便一個(gè)對象的狀態(tài)發(fā)生變化時(shí)，所有依賴于它的對象都得到通知并自動刷新。

原文鏈接

應(yīng)用場景

當(dāng)用戶在網(wǎng)頁執(zhí)行一些操作（如點(diǎn)擊）后就需要執(zhí)行一些預(yù)定的事件（如表單提交、跳轉(zhuǎn)頁面）

優(yōu)點(diǎn)：在發(fā)布者和訂閱者間耦合性降低

缺點(diǎn)：弱化了對象間的關(guān)系，不利于代碼的維護(hù)和理解

實(shí)現(xiàn)思路

確定發(fā)布者

定義發(fā)布者緩存列表，存儲回調(diào)函數(shù)通知訂閱者

發(fā)布消息依次執(zhí)行緩存列表回調(diào)函數(shù)

簡單實(shí)現(xiàn)

let event = {};
event.list = [];
//增加訂閱者
event.listen = function(fn){
    event.list.push(fn);
}
//發(fā)布消息
event.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        fn.apply(this,arguments); 
    }
}

let click = function(){
    console.log("event：click");
}

let hover = function(){
    console.log("event：hover");
}

event.listen(click);
event.listen(hover);
event.trigger();
//打?。?‘event：click’
"event：hover"

完善觀察者模式

let Event = (function(){
    var list = {},
        listen,
        trigger,
        remove;
    listen = function(key,fn){
        list[key] = list[key]||[];
        list[key].push(fn);
    };
    trigger = function(){
        var key = Array.prototype.shift.call(arguments),
            fns = list[key];
        if(!fns || fns.length === 0) {
            return false;
        }
        for(var i = 0, fn; fn = fns[i++];) {
            fn.apply(this,arguments);
        }
    };
    remove = function(key,fn){
        var fns = list[key];
        if(!fns) {
            return false;
        }
        if(!fn) {
            fns && (fns.length = 0);
        }else {
            for(var i = fns.length - 1; i >= 0; i--){
                var _fn = fns[i];
                if(_fn === fn) {
                    fns.splice(i,1);
                }
            }
        }
    };
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();

Event.listen("click", function(type) {
    console.log("event: " + type +" click"); 
});

Event.trigger("click" , "button");
//打印
"event: button click"

觀察者模式可以用于模塊間通訊，訂閱用戶的事件、狀態(tài)，觸發(fā)執(zhí)行相應(yīng)的邏輯處理。

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

guyan0319 2019-08-23 12:10 評論0 收藏0
js設(shè)計(jì)模式 --- 發(fā)布訂閱模式(觀察者模式)

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

EasonTyler 2019-08-22 14:52 評論0 收藏0
JS每日一題:設(shè)計(jì)模式-如何理解觀察者(發(fā)布訂閱)模式?

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

baishancloud 2019-08-23 16:53 評論0 收藏0