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

資訊專欄INFORMATION COLUMN

JavaScript設計模式----裝飾者模式

rose / 1670人閱讀

摘要：聲明這個系列為閱讀設計模式與開發實踐曾探著一書的讀書筆記裝飾者模式的定義裝飾者模式能夠在不改變對象自身的基礎上，在程序運行期間給對像動態的添加職責。與繼承相比，裝飾者是一種更輕便靈活的做法。裝飾者模式的作用就是為對象動態的加入某些行為。

聲明：這個系列為閱讀《JavaScript設計模式與開發實踐》 ----曾探@著一書的讀書筆記

裝飾者模式的定義：

裝飾者(decorator)模式能夠在不改變對象自身的基礎上，在程序運行期間給對像動態的添加職責。與繼承相比，裝飾者是一種更輕便靈活的做法。

裝飾者模式的特點：

可以動態的給某個對象添加額外的職責，而不會影響從這個類中派生的其它對象；

繼承的一些缺點：

繼承會導致超類和子類之間存在強耦合性，當超類改變時，子類也會隨之改變；

超類的內部細節對于子類是可見的，繼承常常被認為破壞了封裝性；

傳統面向對象的裝飾者和JavaScript裝飾者對比： 1.模擬傳統面向對象語言的裝飾者模式 
//模擬傳統語言的裝飾者

//原始的飛機類
var Plan = function () {
};

Plan.prototype.fire = function () {
    console.log("發射普通子彈");
};


//裝飾類
var MissileDecorator = function (plan) {
    this.plan = plan;
}

MissileDecorator.prototype.fire = function () {
    this.plan.fire();
    console.log("發射導彈!");
};

var plan = new Plan();
plan = new MissileDecorator(plan);
plan.fire();
2.JavaScript中的裝飾者模式 
裝飾者模式將一個對象嵌入到另一個對象之中，實際上相當于這個對象被另一個對像包裝起來，形成一條包裝鏈。請求隨著這條包裝鏈依次傳遞到所有的對象，每個對象都有處理這條請求的機會。
var Plan1 = {
    fire: function () {
        console.log("發射普通的子彈");
    }
};

var missileDecorator= function () {
    console.log("發射導彈!");
};

var fire = Plan1.fire;

Plan1.fire=function () {
    fire();
    missileDecorator();
};

Plan1.fire();
裝飾函數

在JavaScript中可以很方便的給某個對象擴展屬性和方法，但卻很難在不改動某個函數源代碼的情況下，給該函數添加一些額外的功能。也就是在代碼運行期間，我們很難切入某個函數的執行環境。

1.使用裝飾者模式例子 
//對window.onload的處理

window.onload=function () {
    console.log("test");
};

var  _onload= window.onload || function () {};

window.onload=function () {
    _onload();
    console.log("自己的處理函數");
};
2.使用AOP（面向切面編程）裝飾函數

主要是以為在JavaScript中會存在隨著函數的調用，this的指向發生變化，導致執行結果發生變化。

2.1.封裝的before函數

在需要執行的函數之前執行某個新添加的功能函數

//是新添加的函數在舊函數之前執行
Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存舊函數的引用
    return function () {                           //返回包含舊函數和新函數的“代理”函數
        beforefn.apply(this,arguments);            //執行新函數,且保證this不被劫持,新函數接受的參數
                                                    // 也會被原封不動的傳入舊函數,新函數在舊函數之前執行
        return _this.apply(this,arguments);
    };
};
2.2.封裝的after函數

在需要執行的函數之后執行某個新添加的功能函數

//新添加的函數在舊函數之后執行
Function.prototype.after=function (afterfn) {
    var _this=this;
    return function () {
        var ret=_this.apply(this,arguments);
        afterfn.apply(this,arguments);
        return ret;
    };
};
2.3.不污染Function原型的做法
var before=function (fn, before) {
    return function () {
        before.apply(this,arguments);
        return fn.apply(this,arguments);
    };
};

function func1(){console.log("1")}
function func2() {console.log("2")}

var a=before(func1,func2);

// a=before(a,func1);
a();
裝飾者模式用法示例： 1.ajax動態添加參數

使用裝飾者模式動態的改變ajax函數，傳輸的參數

//是新添加的函數在舊函數之前執行
Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存舊函數的引用
    return function () {                           //返回包含舊函數和新函數的“代理”函數
        beforefn.apply(this,arguments);            //執行新函數,且保證this不被劫持,新函數接受的參數
        // 也會被原封不動的傳入舊函數,新函數在舊函數之前執行
        return _this.apply(this,arguments);
    };
};


var func = function (param) {
    console.log(param);
};

func = func.before(function (param) {
    param.b = "b";
});

func({b:"222"});


//給ajax請求動態添加參數的例子
var ajax=function (type,url,param) {
    console.log(param);
};

var getToken=function () {
    return "Token";
};


ajax=ajax.before(function (type, url, param) {
    param.token=getToken();
});

ajax("get","http://www.jn.com",{name:"zhiqiang"});
2.表單驗證并且提交

裝飾者模式分離表單驗證和提交的函數

Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存舊函數的引用
    return function () {                           //返回包含舊函數和新函數的“代理”函數
        beforefn.apply(this,arguments);            //執行新函數,且保證this不被劫持,新函數接受的參數
        // 也會被原封不動的傳入舊函數,新函數在舊函數之前執行
        return _this.apply(this,arguments);
    };
};

var validata=function () {
    if(username.value===""){
        alert("用戶名不能為空!")
        return false;
    }
    if(password.value===""){
        alert("密碼不能為空!")
        return false;
    }
}

var formSubmit=function () {
    var param={
        username=username.value;
        password=password.value;
    }

    ajax("post","http://www.mn.com",param);
}

formSubmit= formSubmit.before(validata);


submitBtn.onclick=function () {
    formSubmit();
}
總結：

裝飾者模式和代理模式的區別：

代理模式的目的是，當直接訪問本體不方便或者不符合需要時，為這個本體提供一個代替者。本體定義了關鍵功能，而代理提供了或者拒絕對他的訪問，或者是在訪問本體之前做一些額外的事情。

裝飾者模式的作用就是為對象動態的加入某些行為。

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

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

相關文章

  • 5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

    摘要：下裝飾者的實現了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來實現裝飾者模式原函數拍照片定義函數裝飾函數加濾鏡用裝飾函數裝飾原函數這樣我們就實現了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過函數來添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式 當我們拍了一張照片準備發朋友...

    chunquedong 評論0 收藏0

  • javascript設計模式 --- 裝飾者模式

    摘要：設計模式裝飾者模式何為裝飾者，意思就是，在不影響對象主功能的情況下，再添加一些額外的功能，使對象具備更多的功能。與繼承相比，裝飾者是一種更靈活輕便的做法。 javascript設計模式 --- 裝飾者模式 何為裝飾者，意思就是，在不影響對象主功能的情況下，再添加一些額外的功能，使對象具備更多的功能。與繼承相比，裝飾者是一種更靈活輕便的做法。下面我們看看javascript里裝飾者模式 ...

    kumfo 評論0 收藏0

  • javascript設計模式--裝飾者模式

    摘要：裝飾者模式定義裝飾者模式能夠在不改變對象自身的基礎上，在程序運行期間給對像動態的添加職責。與繼承相比，裝飾者是一種更輕便靈活的做法。 裝飾者模式 定義 : 裝飾者(decorator)模式能夠在不改變對象自身的基礎上，在程序運行期間給對像動態的添加職責。與繼承相比，裝飾者是一種更輕便靈活的做法。 在不改變對象自身的基礎上，在程序運行期間給對象動態地添加一些額外職責 特點 ： 可以動態的...

    haoguo 評論0 收藏0

  • JavaScript設計模式七：裝飾者模式

    摘要：裝飾者模式裝飾者模式提供比繼承更有彈性的替代方案。裝飾者用于包裝同接口的對象，用于通過重載方法的形式添加新功能，該模式可以在被裝飾者的前面或后面加上自己的行為以達到特定的目的。簡單的理解給對象動態添加職責的方式稱為裝飾著模式。 裝飾者模式 裝飾者模式提供比繼承更有彈性的替代方案。裝飾者用于包裝同接口的對象，用于通過重載方法的形式添加新功能，該模式可以在被裝飾者的前面或后面加上自己的行為...

    alexnevsky 評論0 收藏0

  • 《JavaScript 模式》知識點小抄本（上）

    摘要：單體模式有以下優點用來劃分命名空間，減少全局變量數量。通常我們使用操作符創建單體模式的三種選擇，讓構造函數總返回最初的對象使用全局對象來存儲該實例不推薦，容易全局污染。實現該工廠模式并不困難，主要是要找到能夠穿件所需類型對象的構造函數。 介紹 最近開始給自己每周訂個學習任務，學習結果反饋為一篇文章的輸出，做好學習記錄。 這一周(02.25-03.03)我定的目標是《JavaScri...

    didikee 評論0 收藏0

發表評論

0條評論

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