摘要：聲明這個(gè)系列為閱讀設(shè)計(jì)模式與開發(fā)實(shí)踐曾探著一書的讀書筆記裝飾者模式的定義裝飾者模式能夠在不改變對象自身的基礎(chǔ)上，在程序運(yùn)行期間給對像動(dòng)態(tài)的添加職責(zé)。與繼承相比，裝飾者是一種更輕便靈活的做法。裝飾者模式的作用就是為對象動(dòng)態(tài)的加入某些行為。

聲明：這個(gè)系列為閱讀《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》 ----曾探@著一書的讀書筆記

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

可以動(dòng)態(tài)的給某個(gè)對象添加額外的職責(zé)，而不會影響從這個(gè)類中派生的其它對象；

繼承會導(dǎo)致超類和子類之間存在強(qiáng)耦合性，當(dāng)超類改變時(shí)，子類也會隨之改變；

超類的內(nèi)部細(xì)節(jié)對于子類是可見的，繼承常常被認(rèn)為破壞了封裝性；

//模擬傳統(tǒng)語言的裝飾者

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

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


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

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

var plan = new Plan();
plan = new MissileDecorator(plan);
plan.fire();

裝飾者模式將一個(gè)對象嵌入到另一個(gè)對象之中，實(shí)際上相當(dāng)于這個(gè)對象被另一個(gè)對像包裝起來，形成一條包裝鏈。請求隨著這條包裝鏈依次傳遞到所有的對象，每個(gè)對象都有處理這條請求的機(jī)會。

var Plan1 = {
    fire: function () {
        console.log("發(fā)射普通的子彈");
    }
};

var missileDecorator= function () {
    console.log("發(fā)射導(dǎo)彈!");
};

var fire = Plan1.fire;

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

Plan1.fire();

在JavaScript中可以很方便的給某個(gè)對象擴(kuò)展屬性和方法，但卻很難在不改動(dòng)某個(gè)函數(shù)源代碼的情況下，給該函數(shù)添加一些額外的功能。也就是在代碼運(yùn)行期間，我們很難切入某個(gè)函數(shù)的執(zhí)行環(huán)境。

//對window.onload的處理

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

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

window.onload=function () {
    _onload();
    console.log("自己的處理函數(shù)");
};

主要是以為在JavaScript中會存在隨著函數(shù)的調(diào)用，this的指向發(fā)生變化，導(dǎo)致執(zhí)行結(jié)果發(fā)生變化。

2.1.封裝的before函數(shù)

在需要執(zhí)行的函數(shù)之前執(zhí)行某個(gè)新添加的功能函數(shù)

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

2.2.封裝的after函數(shù)

在需要執(zhí)行的函數(shù)之后執(zhí)行某個(gè)新添加的功能函數(shù)

//新添加的函數(shù)在舊函數(shù)之后執(zhí)行
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();

使用裝飾者模式動(dòng)態(tài)的改變ajax函數(shù)，傳輸?shù)膮?shù)

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


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

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

func({b:"222"});


//給ajax請求動(dòng)態(tài)添加參數(shù)的例子
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"});

裝飾者模式分離表單驗(yàn)證和提交的函數(shù)

Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存舊函數(shù)的引用
    return function () {                           //返回包含舊函數(shù)和新函數(shù)的“代理”函數(shù)
        beforefn.apply(this,arguments);            //執(zhí)行新函數(shù),且保證this不被劫持,新函數(shù)接受的參數(shù)
        // 也會被原封不動(dòng)的傳入舊函數(shù),新函數(shù)在舊函數(shù)之前執(zhí)行
        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();
}

裝飾者模式和代理模式的區(qū)別：

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

裝飾者模式的作用就是為對象動(dòng)態(tài)的加入某些行為。