快捷導(dǎo)航

學(xué)習(xí)JavaScript設(shè)計(jì)模式之裝飾者模式

更新時(shí)間：2016年01月19日 09:55:54 作者：奮飛

這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的裝飾者模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下

有時(shí)我們不希望某個(gè)類天生就非常龐大，一次性包含許多職責(zé)。那么我們就可以使用裝飾著模式。
裝飾著模式可以動(dòng)態(tài)地給某個(gè)對(duì)象添加一些額外的職責(zé)，從而不影響這個(gè)類中派生的其他對(duì)象。
裝飾著模式將一個(gè)對(duì)象嵌入另一個(gè)對(duì)象之中，實(shí)際上相當(dāng)于這個(gè)對(duì)象被另一個(gè)對(duì)象包裝起來，形成一條包裝鏈。

一、不改動(dòng)原函數(shù)的情況下，給該函數(shù)添加些額外的功能

1. 保存原引用

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

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

window.onload = function() {
  _onload();
  console.log(2);
}

問題：
（1）必須維護(hù)中間變量
（2）可能遇到this被劫持問題
在window.onload的例子中沒有這個(gè)煩惱，是因?yàn)檎{(diào)用普通函數(shù)_onload時(shí)，this也指向window，跟調(diào)用window.onload時(shí)一樣。

2. this被劫持：

var _getElementById = document.getElementById;
document.getElementById = function(id) {
  console.log(1);
  return _getElementById(id);
}

return _getElementById(id); // 報(bào)錯(cuò)“Uncaught TypeError: Illegal invocation”

因?yàn)開getElementById是全局函數(shù)，當(dāng)調(diào)用全局函數(shù)時(shí)，this是指向window的，而document.getElementById中this預(yù)期指向document。

3. 解決this被劫持：

var _getElementById = document.getElementById;
document.getElementById = function(id) {
  console.log(1);
  return _getElementById.call(document, id);
}

二、用AOP裝飾函數(shù)

/* 讓新添加的函數(shù)在原函數(shù)之前執(zhí)行（前置裝飾）*/
Function.prototype.before = function(beforefn) {
  var _self = this;
  return function() {
    beforefn.apply(this, arguments);  // 新函數(shù)接收的參數(shù)會(huì)被原封不動(dòng)的傳入原函數(shù)
    return _self.apply(this, arguments);
  };
};

/* 讓新添加的函數(shù)在原函數(shù)之后執(zhí)行（后置裝飾）*/
Function.prototype.after = function(afterfn) {
  var _self = this;
  return function() {
    var ret = _self.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};

document.getElementById = document.getElementById.before(function() {
  console.log(1);
});

三、避免污染原型

var before = function(fn, beforefn) {
  return function() {
    beforefn.apply(this, arguments);
    return fn.apply(this, arguments);
  };
};

var after = function(fn, afterfn) {
  return function() {
    var ret = fn.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};

document.getElementById = before(document.getElementById, function(){
  console.log(1);
});

四、示例–插件式的表單驗(yàn)證

結(jié)合《學(xué)習(xí)JavaScript設(shè)計(jì)模式之策略模式》中的【表單驗(yàn)證】，運(yùn)用到ajax提交數(shù)據(jù)驗(yàn)證，效果很棒！

修改上述before方法

var before = function(fn, beforefn) {
  return function() {
    if(beforefn.apply(this, arguments) === false) {
      // beforefn返回false，直接return，不執(zhí)行后面的原函數(shù)
      return;
    }
    return fn.apply(this, arguments);
  };
};

/* 模擬數(shù)據(jù)驗(yàn)證*/
var validate = function() {
  if(username === "") {
    console.log("驗(yàn)證失??！");
    return false;
  }
  return true;
}
/* 模擬ajax提交*/
var formSubmit = function() {
  console.log("提交！??！");
}

username = 1;
formSubmit = before(formSubmit, validate); // 提交?。?！
formSubmit();

username = "";
formSubmit = before(formSubmit, validate); // 驗(yàn)證失?。?
formSubmit();

五、裝飾者模式和代理模式

相同點(diǎn)：這兩種模式都描述了怎么為對(duì)象提供一定程度上的間接引用，它們的實(shí)現(xiàn)部分都保留了對(duì)另外一個(gè)對(duì)象的引用，并且向那個(gè)對(duì)象發(fā)送請(qǐng)求。
區(qū)別：
（1）代理模式：當(dāng)直接訪問本地不方便或者不符合需求時(shí)，為這個(gè)本體提供一個(gè)替代者。本地定義關(guān)鍵功能，而代理提供或拒絕對(duì)它的訪問，或者在訪問本體之前走一些額外的事情。（其做的事情還是跟本體一樣）
（2）裝飾者模式：為對(duì)象動(dòng)態(tài)加入行為。（一開始不能確定對(duì)象的全部功能，實(shí)實(shí)在在的為對(duì)象添加新的職責(zé)和行為）

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: