オブザーバモード(パブリッシュサブスクリプションモード)の簡単な実装、および実際の応用例

オブザーバモード実装
最近一般的な設計モードをまとめたことを考慮すると、ちょうど最近のウィジェットプロジェクトにおけるコンポーネント間非同期通信におけるvueバスメカニズムを模倣して、メッセージの購読とパブリッシュのためのオブジェクトを実現した.そこでjsにおける観察者パターン実装を以下にまとめる.
概要

目的:サブスクリプションをパブリッシュする機能を実現し、サブスクリプション機能をキャンセルするobserverオブジェクト

は、パッケージ化された良好なコンポーネント間の非同期通信を解決する方法である

である.

の典型的な応用はvueにおけるバスメカニズム

である.
主な内容

は関数を発行し、発行時にパラメータ

を携帯する可能性があります.

は関数を購読し、メッセージを受信した後にコールバック関数

を実行する.

サブスクライバおよびサブスクライバのコールバック関数をキャッシュするリスト

は、関数の購読をキャンセルします.(考慮すべきことが多い)

コード実装は次のとおりです.

function Observer() {
    this.cache = {}  //                       
}

Observer.prototype.on = function (key,fn) {//key:          （  ），fn             
    if(!this.cache[key]){
        this.cache[key]=[]
    }
    this.cache[key].push(fn)
}

Observer.prototype.emit = function (key) { //arguments               
    if(this.cache[key]&&this.cache[key].length>0){
        var fns = this.cache[key]
    }
    for(let i=0;ifunction (key,fn) {
    let fns = this.cache[key]
    if(!fns||fns.length===0){
        return
    }
    //      fn，              
    if(!fn){
        fns=[]
    }else {
        fns.forEach((item,index)=>{
            if(item===fn){
                fns.splice(index,1)
            }
        })
    }
}


//example


var obj = new Observer()
obj.on('hello',function (a,b) {
    console.log(a,b)
})
obj.emit('hello',1,2)
//                
obj.on('test',fn1 =function () {
    console.log('fn1')
})
obj.on('test',fn2 = function () {
    console.log('fn2')
})
obj.remove('test',fn1)
obj.emit('test')

実際の開発における使用方法

vueでは、vueオブジェクト上でこのパブリケーションサブスクリプション機能が実装されています.トランスファゲート

は、vue内のバスメカニズムをシミュレートし、wepyのウィジェットプロジェクトでコンポーネント間の非同期通信のためのバスをカスタマイズする.

//app.wpy    wepy   ：
wepy.$bus = new Observer();
//    (    )       
wepy.$bus.on('test2',function(){
    console.log('this is test 2')
})
wepy.$bus.emit('test2')

転載先:https://juejin.im/post/5affed5451882542bd69f2ec