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

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

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

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

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

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

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

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

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


//裝飾類(lèi)
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è)對(duì)象嵌入到另一個(gè)對(duì)象之中，實(shí)際上相當(dāng)于這個(gè)對(duì)象被另一個(gè)對(duì)像包裝起來(lái)，形成一條包裝鏈。請(qǐng)求隨著這條包裝鏈依次傳遞到所有的對(duì)象，每個(gè)對(duì)象都有處理這條請(qǐng)求的機(jī)會(huì)。

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

//對(duì)window.onload的處理

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

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

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

主要是以為在JavaScript中會(huì)存在隨著函數(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ù)
                                                    // 也會(huì)被原封不動(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ù)
        // 也會(huì)被原封不動(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請(qǐng)求動(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ù)
        // 也會(huì)被原封不動(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)直接訪問(wèn)本體不方便或者不符合需要時(shí)，為這個(gè)本體提供一個(gè)代替者。本體定義了關(guān)鍵功能，而代理提供了或者拒絕對(duì)他的訪問(wèn)，或者是在訪問(wèn)本體之前做一些額外的事情。

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