購読モードを公開します.

イベントオブジェクトを初期化

var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};

メインコード:

var event = {
    list: [],
    listen: function(key, fn) {
        //                  
        if(!this.list[key]) {
            this.list[key] = [];
        }
        //              
        this.list[key].push(fn);
        //     
        return this 
    },
    trigger: function(){
        //   trigger           ， key 
        //   arguments  trigger      
        var key = Array.prototype.shift.call(arguments);
        //     key       
        var fns = this.list[key];
        //             ，   
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0, fn;i < fns.length; i ++) {
            fn = fns[i]
            //    key            
            //   arguments     trigger      ,          
            //        fn      
            // this   fn      
            fn.apply(this, arguments);
        }
    }
   };

呼び出し実行:

    //            
    var shoeObj = {};
    //        
    initEvent(shoeObj);
    //           （    ） 
    shoeObj.listen('red',function(size, price){
        console.log("   ："+size);  
        console.log('price ' +price)
    }).listen('block', function (size, price) {
        console.log("   ："+size);  
        console.log('price ' +price)
    })
    
    shoeObj.trigger("red", 40, 500);

    shoeObj.trigger("block",42, 300); 

メッセージを購読したら、私たちはメッセージを失うかもしれません.だから、Eventオブジェクトはもう一つの方法を追加します.

//  
remove : function(key, fn) {
       var fns = this.list[key]
       //   key            ，   
       if(!fns) return
       //              ，      key         
       if(!fn) {
         fns.length = 0 //   this.list[key] = []
         // fns = []   
         //fns = []     ，  this.list[key]      
         //    ,    fns  this.list[key]    （         ）
         //fns = [],     fns                   ，   
         //         this.list[key]                   
         //   。
       }else {
         for(var i = 0; i < fns.length; i ++) {
           var _fn = fns[i]
           if(_fn === fn) {
              fns.splice(i, 1) //           
           }
         }
       }
    },
//  

呼び出し

    //             red         
    //   fn1  fn2     ，    ，  fn1，fn2         
    //  remove   ，         
    shoeObj.listen('red',fn1 = function(size, price){
        console.log("   1----" +size);  
        console.log('price 1----' +price)
    }).listen('red', fn2 = function(size, price){
        console.log("   2----" +size);  
        console.log('price 2----' +price)
    })
    
    //remove  fn2
    shoeObj.remove('red', fn2)
    //            fn1
    shoeObj.trigger("red", 40, 500);
    
    //  remove     ，   red        remove 
    shoeObj.remove('red')
    shoeObj.trigger("red", 40, 500);

終止語で購読モードを発表することは、jsの中で36のデザインモードの中で最も一般的なパターンであり、重要なデザインパターンでもある.実は私達はプロジェクトの論理コードを書く時、知らず知らずのうちにこの思想を使っています.例えば、私たちは一つの方法を定義します.定義する時にもうlistenは一つの対象になります.或いはwindowオブジェクトになります.clickトリガ時に、この方法を戻して関数をトリガします.パッケージのプラグインを書くのに適した購読モードをリリースします.業務の論理コードを書くのはちょっと難しいと思います.もちろんこれは私の考えです.次に、アップロードしたコンポーネントをこのモードでパッケージするつもりです.
付録(参考文献)

cnのブログ