<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        javascript觀察者模式定義、場景實例代碼詳解

        來源:懂視網 責編:小采 時間:2020-11-27 20:15:19
        文檔

        javascript觀察者模式定義、場景實例代碼詳解

        javascript觀察者模式定義、場景實例代碼詳解:觀察者模式定義對象間的一種一對多的依賴關系,以便當一個對象的狀態發生改變時,所有依賴于它的對象都得到通知并自動刷新,也被稱為是發布訂閱模式。它需要一種高級的抽象策略,以便訂閱者能夠彼此獨立地發生改變,而發行方能夠接受任何有消費意向的訂閱者。
        推薦度:
        導讀javascript觀察者模式定義、場景實例代碼詳解:觀察者模式定義對象間的一種一對多的依賴關系,以便當一個對象的狀態發生改變時,所有依賴于它的對象都得到通知并自動刷新,也被稱為是發布訂閱模式。它需要一種高級的抽象策略,以便訂閱者能夠彼此獨立地發生改變,而發行方能夠接受任何有消費意向的訂閱者。

        觀察者模式

        定義對象間的一種一對多的依賴關系,以便當一個對象的狀態發生改變時,所有依賴于它的對象都得到通知并自動刷新,也被稱為是發布訂閱模式。

        它需要一種高級的抽象策略,以便訂閱者能夠彼此獨立地發生改變,而發行方能夠接受任何有消費意向的訂閱者。

        應用場景:  

        這個模式要先說應用場景,比較好理解。

        打一個離我們比較近的一個場景,博客園里面有一個訂閱的按鈕(貌似有bug),比如小A,小B,小C都訂閱了我的博客,當我的博客一有更新時,就會統一發布郵件給他們這三個人,就會通知這些訂閱者

        發布訂閱模式的流程如下:

        1. 確定誰是發布者(比如我的博客)。

        2. 然后給發布者添加一個緩存列表,用于存放回調函數來通知訂閱者。

        3. 發布消息,發布者需要遍歷這個緩存列表,依次觸發里面存放的訂閱者回調函數。

        4. 退訂(比如不想再接收到這些訂閱的信息了,就可以取消掉)

        代碼如下:

        var pubsub = {}; // 定義發布者
        (function (q) {
         var list = [], //回調函數存放的數組,也就是記錄有多少人訂閱了我們東西
         subUid = -1;
         // 發布消息,遍歷訂閱者
         q.publish = function (type, content) {
         // type 為文章類型,content為文章內容
         // 如果沒有人訂閱,直接返回
         if (!list[type]) {
         return false;
         }
         setTimeout(function () {
         var subscribers = list[type],
         len = subscribers ? subscribers.length : 0;
         
         while (len--) {
         // 將內容注入到訂閱者那里
         subscribers[len].func(type, content);
         }
         }, 0);
         return true;
         };
         //訂閱方法,由訂閱者來執行
         q.subscribe = function (type, func) {
         // 如果之前沒有訂閱過
         if (!list[type]) {
         list[type] = [];
         }
         // token相當于訂閱者的id,這樣的話如果退訂,我們就可以針對它來知道是誰退訂了。
         var token = (++subUid).toString();
         // 每訂閱一個,就把它存入到我們的數組中去
         list[type].push({
         token: token,
         func: func
         });
         return token;
         };
         //退訂方法
         q.unsubscribe = function (token) {
         for (var m in list) {
         if (list[m]) {
         for (var i = 0, j = list[m].length; i < j; i++) {
         if (list[m][i].token === token) {
         list[m].splice(i, 1);
         return token;
         }
         }
         }
         }
         return false;
         };
        } (pubsub));
        //將訂閱賦值給一個變量,以便退訂
        var girlA = pubsub.subscribe('js類的文章', function (type, content) {
         console.log('girlA訂閱的'+type + ": 內容內容為:" + content);
        });
        var girlB = pubsub.subscribe('js類的文章', function (type, content) {
         console.log('girlB訂閱的'+type + ": 內容內容為:" + content);
        });
        var girlC = pubsub.subscribe('js類的文章', function (type, content) {
         console.log('girlC訂閱的'+type + ": 內容內容為:" + content);
        });
        //發布通知
        pubsub.publish('js類的文章', '關于js的內容');
        // 
        輸出: // girlC訂閱的js類的文章: 內容內容為:關于js的內容 // test3.html:78 girlB訂閱的js類的文章: 內容內容為:關于js的內容 // test3.html:75 girlA訂閱的js類的文章: 內容內容為:關于js的內容 //girlA退訂了關于js類的文章 setTimeout(function () { pubsub.unsubscribe(girlA); }, 0); //再發布一次,驗證一下是否還能夠輸出信息 pubsub.publish('js類的文章', "關于js的第二篇文章"); // 輸出: // girlB訂閱的js類的文章: 內容內容為:關于js的第二篇文章 // girlC訂閱的js類的文章: 內容內容為:關于js的第二篇文章

        代碼可以自己運行一遍,這樣比較好理解

        優缺點:

        優點:當我們需要維護相關對象的一致性的時候,使用觀察者模式,,就可以避免對象之間的緊密耦合。例如,一個對象可以通知另外一個對象,而不需要知道這個對象的信息。

        缺點:在發布/訂閱模式中,如果我們需要將發布者同訂閱者上解耦,將會在一些情況下,導致很難確保我們應用中的特定部分按照我們預期的那樣正常工作。也就是說它的優點也可能是它的缺點

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        javascript觀察者模式定義、場景實例代碼詳解

        javascript觀察者模式定義、場景實例代碼詳解:觀察者模式定義對象間的一種一對多的依賴關系,以便當一個對象的狀態發生改變時,所有依賴于它的對象都得到通知并自動刷新,也被稱為是發布訂閱模式。它需要一種高級的抽象策略,以便訂閱者能夠彼此獨立地發生改變,而發行方能夠接受任何有消費意向的訂閱者。
        推薦度:
        標簽: 模式 定義 js
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 午夜国产精品免费观看 | 91嫩草亚洲精品| 最近免费中文字幕MV在线视频3| 国产一区二区三区无码免费| 成a人片亚洲日本久久| 国产无遮挡又黄又爽免费视频| 亚洲中文字幕无码亚洲成A人片 | 日本高清免费不卡在线| 亚洲熟伦熟女专区hd高清| 国产精品免费观看久久| 亚洲日韩国产欧美一区二区三区 | 亚洲一区二区三区在线视频| 一级特级女人18毛片免费视频| 亚洲精品人成无码中文毛片| 巨胸喷奶水www永久免费| 亚洲av日韩综合一区在线观看| 91精品啪在线观看国产线免费| 国产色在线|亚洲| 免费国产a国产片高清| 中文精品人人永久免费| 久久亚洲中文字幕精品有坂深雪 | 亚洲 自拍 另类小说综合图区| 特级毛片爽www免费版| 亚洲欧洲成人精品香蕉网| 最近中文字幕大全免费视频| 亚洲最大的成人网| 久久影院亚洲一区| 三年片在线观看免费观看大全动漫 | 一本天堂ⅴ无码亚洲道久久| 免费又黄又爽又猛的毛片| 99视频在线观看免费| 亚洲网址在线观看| 日韩免费无码一区二区视频| 国产精品免费久久| 亚洲男女性高爱潮网站| 国产公开免费人成视频 | 好男人视频社区精品免费| 人与动性xxxxx免费| 亚洲网站视频在线观看| 亚洲精品偷拍视频免费观看| 69影院毛片免费观看视频在线|