欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

怎樣用JavaScript實(shí)現(xiàn)觀察者模式

 更新時(shí)間：2021年04月26日 09:07:02   作者：有夢想的咸魚前端  
這篇文章主要介紹了怎樣用JavaScript實(shí)現(xiàn)觀察者模式，想學(xué)習(xí)設(shè)計(jì)模式的同學(xué)，可以參考一下

概述

觀察者模式又被稱為發(fā)布-訂閱模式，是設(shè)計(jì)模式中的一種行為型模式；

定義：

觀察者模式定義了一種一對多的對象依賴關(guān)系，當(dāng)被依賴的對象的狀態(tài)發(fā)生了改變，所有依賴它的對象都會得到通知；

白話解釋：

假如你去蘋果專賣店買最新款的iphone11，因?yàn)閕phone11剛出來不久，正處旺季，供貨不足；當(dāng)你去專賣店的時(shí)候，店員告訴你暫時(shí)沒貨了，但是你可以留下你的聯(lián)系方式，如果貨到了，會第一時(shí)間通知；當(dāng)然你肯定不會每天都去專賣店問iphone11到貨沒有，也不會天天給專賣店打電話，因?yàn)槟阌心阕约旱墓ぷ骱蜕?，不可能有那么多閑暇時(shí)間；所以此時(shí)，店員讓你留下聯(lián)系方式，到貨了第一時(shí)間通知你，不會給你帶來麻煩，而你只需要等著專賣店的電話即可；而這種方法就是一種典型的觀察者模式；

首先我們還是來分析一下：

1.訂閱方法：我們把聯(lián)系方式給專賣店店員是屬于一種消息訂閱的消息，因?yàn)橹挥羞@樣你才能及時(shí)的知道iphone11到貨了，所有我們需要一個訂閱行為的具體方法；

2.預(yù)訂列表：要知道iphone11是屬于新版iphone，所以肯定不會是只有你一個人去預(yù)訂，所以店員為了方便統(tǒng)計(jì)還需要一個預(yù)訂列表來統(tǒng)計(jì)所有的預(yù)訂者的聯(lián)系方式以及預(yù)訂手機(jī)版本信息，所以我們這里先給它定義為一個對象；key代表是預(yù)訂者的聯(lián)系方式，value代表預(yù)訂手機(jī)版本信息；

3.發(fā)布方法：當(dāng)iphone11到貨的時(shí)候，專賣店肯定要根據(jù)預(yù)訂列表來進(jìn)行統(tǒng)一發(fā)布消息（"iphone11到貨了，大家快來搶?。?！"），所以專賣店需要一個發(fā)布方法來實(shí)行具體的發(fā)布行為；、

4.取消訂閱：萬物相對，能訂閱肯定就能取消訂閱；在等待iphone11到貨通知的時(shí)候，你急著用手機(jī)，所以直接買了華為的某款，所以iphone11暫時(shí)對你來說需求不大，因?yàn)槟阋呀?jīng)有了手機(jī)所以專賣店的iphone11是否到貨對你來說沒有任何意義了；所以此時(shí)你不想被打擾，需要取消訂閱消息；所以我們需要一個取消訂閱方法來實(shí)現(xiàn)具體的取消訂閱的行為；

觀察者模式的應(yīng)用場景

1、DOM事件

如果你是一個前端開發(fā)人員，不管你讀這篇文章之前是否已經(jīng)了解觀察者模式，但是我能肯定你已經(jīng)用過觀察者模式；

document.body.addEventListener('click', function() {
    console.log('hello world!');
});

這段代碼看著眼熟嗎？是的，這是一個DOM事件的監(jiān)聽；我們通過給body訂閱click事件（click相當(dāng)于上面的訂閱方法），因?yàn)闉g覽器并不知道你什么時(shí)候點(diǎn)擊鼠標(biāo)，所以等你觸發(fā)click事件的時(shí)候才會觸發(fā)函數(shù)給你發(fā)布通知（發(fā)布方法）；DOM事件就是一個觀察者模式的實(shí)現(xiàn)；

2、vue雙向綁定v-model

我們作為前端開發(fā)人員，肯定知道vue是一個MVVM模式的框架；vue的核心就是雙向綁定，那么雙向綁定的實(shí)現(xiàn)實(shí)際上就是一種觀察者模式；因?yàn)槟闶紫冉壎艘粋€數(shù)據(jù)之后（訂閱方法），瀏覽器并不知道你什么時(shí)候修改，你頁面上所有綁定了該數(shù)據(jù)或者依賴該數(shù)據(jù)的節(jié)點(diǎn)其實(shí)就是一個預(yù)訂列表，只有等你修改了該數(shù)據(jù)的值的時(shí)候，vue才會通知（發(fā)布方法）到依賴該數(shù)據(jù)的方法/數(shù)據(jù)進(jìn)行相應(yīng)的操作或刷新；

當(dāng)然觀察者模式絕不僅限于這倆種實(shí)現(xiàn)場景，在我們的生活中、業(yè)務(wù)場景中有很多觀察者模式的示例，之前我們第一篇工廠模式介紹設(shè)計(jì)模式的時(shí)候就說過了，設(shè)計(jì)模式是一種解決問題的思路而非一種固定的公式，那么我們怎么實(shí)現(xiàn)觀察者模式呢？

觀察者模式的實(shí)現(xiàn)

//定義商家
var merchants = {};
//定義預(yù)訂列表
merchants.orderList = {};
//將增加的預(yù)定者添加到預(yù)訂列表中   （訂閱方法）
merchants.listen = function(id,info){
    //如果存在
    if(!this.orderList[id]){
        // （預(yù)訂列表）
        this.orderList[id] = [];
    }
    // 將用戶的預(yù)定的產(chǎn)品信息存入到數(shù)組中
    this.orderList[id].push(info);
}
//發(fā)布信息（發(fā)布方法）
merchants.publish = function(){
    var id = Array.prototype.shift.call(arguments);
    var infos = this.orderList[id];
    if(!infos || infos.length === 0){
        console.log("您還沒有預(yù)定信息");
        return false;
    }

    for(var i = 0;i < infos.length;i++){
        console.log("預(yù)定成功");
        console.log("尊敬的用戶:")
        infos[i].apply(this,arguments);
        console.log("到貨了");
    }
}
//取消訂閱  
merchants.remove = function(id,fn){
    var infos = this.orderList[id];
    if(!infos){ return false}

    if(!fn){
        console.log(123);
    }else{
        for(var i = 0;i < infos.length;i++){
            if(infos[i] === fn){
                infos.splice(i,1);
            }
        }
    }
}
let customeA = function(){
    console.log("黑色尊享版一臺");
}

merchants.listen("15172103336",customeA);
merchants.remove("15172103336",customeA);
merchants.publish("15172103336");

上面的代碼稍微有點(diǎn)長，不過沒有很難；首先我們是定義了一個對象是作為商家，然后定義了一個空的對象作為預(yù)訂列表，再一步步的實(shí)現(xiàn)我們的訂閱方法和發(fā)布以及取消訂閱的方法；邏輯不復(fù)雜，但是有一些語法需要講解一下：

發(fā)布方法中的var id = Array.prototype.shift.call(arguments);這句的意思是將merchants.publish("15172103336");方法調(diào)用的時(shí)候第一個參數(shù)返回給它然后復(fù)制為id，所以其實(shí)此時(shí)的id值為”15172103336“；

infos[i].apply(this,arguments);這個方法也不是特別好理解，首先infos里裝的是預(yù)訂者的手機(jī)號碼以及手機(jī)版本信息，所以我們infos[i].apply(this,arguments);這個方法其實(shí)就是將"15172103336"對應(yīng)的手機(jī)版本信息函數(shù)進(jìn)行調(diào)用了一遍；實(shí)際上等于infos[i](arguments);

總結(jié)

觀察者模式不管是在前端領(lǐng)域還是在現(xiàn)實(shí)生活中的應(yīng)用都是有很常見的場景，學(xué)好觀察者模式有利用我們學(xué)習(xí)vue的源碼知識，當(dāng)然不僅限于此，所以觀察者模式值得我們好好學(xué)習(xí)，一句話："你品，你細(xì)品！" 今天付出的努力，在日后總會換成工資來回報(bào)你的！

以上就是怎樣用JavaScript實(shí)現(xiàn)觀察者模式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript觀察者模式的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論