国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue雙向綁定的實現原理系列(二):設計模式

seal_de / 2635人閱讀

摘要:設計模式裝飾者模式源碼在不改變對象自身的基礎上,在程序運行期間給對象動態的添加職責看一個簡單的例子我是函數我是函數額外的功能我是函數我是函數額外的功能監聽數組的變化監聽數組的變化或者操作函數等打印監聽數組的變化或者操作函數等看一個段來自面向

設計模式 1、裝飾者模式

github源碼

在不改變對象自身的基礎上,在程序運行期間給對象動態的添加職責

//看一個簡單的例子:
Function.prototype.fn = function(fn){
    var self = this;
    return function(){
        self.apply(this,arguments);
        fn.apply(this,arguments);
    }
}

function a(){
    console.log("我是函數a");
}

var copyA = a.fn(function(){
    console.log("我是a函數額外的功能");
})

copyA();  
// 我是函數a
// 我是a函數額外的功能

//監聽數組的變化
  var methods=["push","pop","shift","unshift","splice","slice","sort","reverse"];
    var Method = {};
    for(var i=0;i
看一個段來自javascript面向對象編程指南(第二版)中關于裝飾器模式的解釋及其代碼:
    裝飾器模式是一種結構型模式,它與對象的創建無關,主要考慮的是如何拓展對象的功能。也就是說,除了使用線性式(父-子-孫)繼承方式之外,我們也可以為一個基礎對象創建若干個裝飾對象以拓展其功能。然后,由我們的程序自行選擇不同的裝飾器,并按不同的順序使用它們。在不同的程序中我們可能會面臨不同的需求,并從同樣的裝飾器集合中選擇不同的子集。
//裝飾一顆圣誕樹
    var tree = {};
    tree.decorate = function(){
        console.log("tree");
    }

    /*接著,再定義 getDecorator()方法,該方法用于添加額外的裝飾器。裝飾器被實現為構造器函數,都繼承自 tree 對象。*/

    tree.getDecorator = function(deco){
        tree[deco].prototype = this;
        return new tree[deco];
    };
   
    /*下面來創建3個裝飾器,我們將它設為 tree 的一個屬性(以保持全局命名空間的純凈)。 以下對象也提供了 decorate()方法,注意它先調用了父類的decorate()方法。*/

    tree.Red = function(){
        this.decorate = function(){
            this.Red.prototype.decorate();
            // console.log(this.Red.prototype);
            // console.log(this.Red.prototype.decorate);
            console.log("red");
        };
        this.name = "red";
    }
    tree.Blue = function(){
        this.decorate = function(){
            this.Blue.prototype.decorate();
            // console.log(this.Blue.prototype.decorate);
            //tree["Blue"]的原型是tree,所以打印出"tree"
            console.log("blue");
        }
        this.name = "blue";
    }
    tree.Angel = function(){
        this.decorate = function(){
            this.Angel.prototype.decorate();
            // console.log(this.Angel.prototype.decorate);
            console.log("angle");
        }
        this.name = "angel";
    }

    /*把所有的裝飾器都添加到基礎對象中:*/

    tree = tree.getDecorator("Blue"); 
    tree = tree.getDecorator("Angel");
    tree = tree.getDecorator("Red");

    /*運行:*/
    tree.decorate();
    //tree
    //blue
    //angle
    //red

     /*解析:
        1、執行tree = tree.getDecorator("Blue"):
            tree["Blue"].prototype = tree;
            tree = {decorate: ?, name: "blue"}
            即tree["Blue"]賦值給tree,tree["Blue"]的原型指向tree
        輸出:
        "tree"
        "blue"

        2、執行tree = tree.getDecorator("Angel"):
            tree["Angel"].prototype = tree["Blue"],(這時候tree已經賦值為tree["Blue"])
            tree = {decorate: ?, name: "Angle"}
            即tree["Angel"]賦值給tree,tree["Angel"]的原型指向tree["Blue"]
        輸出:
        "angel"

        3、執行tree = tree.getDecorator("Red"):
            tree["Red"].prototype = tree["Angel"],(這時候tree已經賦值為tree["Angel"])
            tree = {decorate: ?, name: "Red"}
            即tree["Red"]賦值給tree,tree["Red"]的原型指向tree["Angel"]
        輸出:
        "red"
    */

/*
圖解:從下往上依次繼承
  tree = {decorate:fn,getDecorator:fn}
                    |
     tree["Blue"].prototype//tree={decorate: ?, name: "blue"}
                                    |
                        tree["Angel"].prototype//tree={decorate: ?, name: "Angle"} 
                                                        |
                                                 tree["Red"].prototype//tree={decorate: ?, name: "Red"}     
*/                                                                                                  
2、觀察者模式(有時也稱為發布-訂閱模式)
看一個段來自javascript面向對象編程指南(第二版)中關于裝飾器模式的解釋及其代碼:

觀察者模式是一種行為型模式,主要用于處理不同對象
之間的交互通信問題。觀察者模式中通常會包含兩類對象。

一個或多個發布者對象:當有重要的事情發生時,會通知訂閱者。

一個或多個訂閱者對象:它們追隨一個或多個發布者,監聽它們的通知,并作出
相應的反應

var observer = {
        addSubscriber:function (callback){//添加訂閱者
            if(typeof callback === "function"){
                this.subscribers[this.subscribers.length] = callback;
            }
        },
        removeSubscriber:function (callback){//刪除訂閱者
            for(var i=0;iobserver{addSubscriber: ?, removeSubscriber: ?, publish: ?, make:f}
                if(this.hasOwnProperty(i)){//observer.hasOwnProperty("addSubscriber") -> true
                    o[i] = this[i];
                    o.subscribers = [];
                }
            }//o-> {addSubscriber: ?, removeSubscriber: ?, publish: ?, make:f,subscribers:[],o.XX}
        }
    };

    //有個函數blogger和任意一個函數jack
    var blogger = {
        writeBlogPost : function(){
            var content = "blogger";
            this.publish(content);
        }
    };
    var jack = {
        read:function (what){
            console.log("jack訂閱: "+what);
        }
    };

    //blogger變為發布者
    observer.make(blogger);

    //jack訂閱blogger
    blogger.addSubscriber(jack.read);

    //blogger發布信息
    blogger.writeBlogPost();

    //輸出:jack訂閱: blogger

    最后: 別的函數也可以成為發布者,
           blogger也可以添加任意的函數為訂閱者
           jack也可以訂閱別的發布者          
    以上總結為:
        1.指定一個發布者
        2.給發布者添加緩存列表,存放回調函數,通知訂閱者
        3.發布信息時,發布者遍歷緩存表,觸發存放的回調函數
    下面看個簡單的例子:
  var Event = function(){
        this.subs = {};
    }

    //添加收聽者:
    Event.prototype.addSubscriber=function(k,callback){
        if(!this.subs[k]){
            this.subs[k]=[];
        }
        this.subs[k].push(callback);
    };
    //發布事件:
    Event.prototype.publish=function(k,item){
        var fns=this.subs[k];

        if(fns){//防止發布給不存在的對象
            for(var i=0;i
系列文章的目錄:

Vue雙向綁定的實現原理系列(一):Object.defineproperty
Vue雙向綁定的實現原理系列(二):設計模式
Vue雙向綁定的實現原理系列(三):監聽器Observer和訂閱者Watcher
Vue雙向綁定的實現原理系列(四):補充指令解析器compile

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107066.html

相關文章

  • Vue雙向綁定實現原理系列(三):監聽器Observer和訂閱者Watcher

    摘要:至此監聽器和訂閱者功能基本完成,后面再加上指令解析器的功能系列文章的目錄雙向綁定的實現原理系列一雙向綁定的實現原理系列二設計模式雙向綁定的實現原理系列三監聽器和訂閱者雙向綁定的實現原理系列四補充指令解析器 監聽器Observer和訂閱者Watcher 實現簡單版Vue的過程,主要實現{{}}、v-model和事件指令的功能 主要分為三個部分 github源碼 1.數據監聽器Obser...

    widuu 評論0 收藏0
  • Vue雙向綁定實現原理系列(三):監聽器Observer和訂閱者Watcher

    摘要:至此監聽器和訂閱者功能基本完成,后面再加上指令解析器的功能系列文章的目錄雙向綁定的實現原理系列一雙向綁定的實現原理系列二設計模式雙向綁定的實現原理系列三監聽器和訂閱者雙向綁定的實現原理系列四補充指令解析器 監聽器Observer和訂閱者Watcher 實現簡單版Vue的過程,主要實現{{}}、v-model和事件指令的功能 主要分為三個部分 github源碼 1.數據監聽器Obser...

    legendaryedu 評論0 收藏0
  • Vue雙向綁定實現原理系列(一):Object.defineproperty

    摘要:并且,由于是在不同的數據上觸發同步,可以精確的將變更發送給綁定的視圖,而不是對所有的數據都執行一次檢測。默認值為表示能否修改屬性的值。 了解Object.defineProperty() github源碼 Object.defineProperty()方法直接在一個對象上定義一個新屬性,或者修改一個已經存在的屬性, 并返回這個對象。 vueJS采用 ES5 提供的 Object....

    crossoverJie 評論0 收藏0
  • Vue雙向綁定實現原理系列(一):Object.defineproperty

    摘要:并且,由于是在不同的數據上觸發同步,可以精確的將變更發送給綁定的視圖,而不是對所有的數據都執行一次檢測。默認值為表示能否修改屬性的值。 了解Object.defineProperty() github源碼 Object.defineProperty()方法直接在一個對象上定義一個新屬性,或者修改一個已經存在的屬性, 并返回這個對象。 vueJS采用 ES5 提供的 Object....

    bluesky 評論0 收藏0
  • Vue雙向綁定實現原理系列(四):補充指令解析器compile

    摘要:補充指令解析器源碼補充下節點類型的知識元素節點屬性節點文本節點節點實體引用名稱節點實體名稱節點處理指令節點注釋節點文檔節點文檔類型節點文檔片段節點聲明節點指令解析器解析節點,直接固定某個節點進行替換數據的解析模板指令,替換模板數據初始化試圖 補充指令解析器compile github源碼 補充下HTML節點類型的知識: 元素節點   Node.ELEMEN...

    cheukyin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<