DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 輕松掌握JavaScript裝飾者模式
輕松掌握JavaScript裝飾者模式
編輯:關於JavaScript     

在傳統的面向對象語言中,給對象添加功能常常使用繼承的方式,但繼承的方式會帶來問題:當父類改變時,他的所有子類都將隨之改變。 

當JavaScript腳本運行時,在一個對象中(或他的原型上)增加行為會影響該對象的所有實例, 

裝飾者是一種實現繼承的替代方案,它通過重載方法的形式添加新功能,該模式可以在被裝飾者前面(before)或者後面(after)加上自己的行為以達到特定的目的。 

裝飾者模式是為已有功能動態地添加更多功能的一種方式,把每個要裝飾的功能放在單獨的函數裡,然後用該函數包裝所要裝飾的已有函數對象,因此,當需要執行特殊行為的時候,調用代碼就可以根據需要有選擇地、按順序地使用裝飾功能來包裝對象。優點是把類(函數)的核心職責和裝飾功能區分開了。 

我們可以定義工具函數,如下:

 Function.prototype.before = function (beforeFn) {
  var self = this; //保存原函數的引用
  return function () { //返回包含了新函數和原函數的代理函數
    beforeFn.apply(this,arguments); //執行新函數,且保證this不被劫持
    return self.apply(this,arguments); //執行原函數,並返回原函數的執行結果,並保證this不被劫持
  }
};
Function.prototype.after = function (afterFn) {
  var self = this;
  return function () {
    var ret = self.apply(this,arguments);
    afterFn.apply(this,arguments);
    return ret;
  }
}; 

這裡的參數beforeFn、afterFn即為要為原函數擴展新功能的新函數(添加裝飾),它們的唯一區別是執行順序的不同。如果不想污染Function的原型,可以用下面的方法:

 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;
  }
}; 

例子:給HTTP請求中帶上一個參數防止CSRF攻擊

 var ajax = function (type, url, param) {
  console.log(param); //發送ajax請求代碼略...
};
var beforeFn = function (type, url, param) {
  param.Token = 'Token';
};
ajax = ajax.before(beforeFn);
ajax('get','http://...com/userinfo',{name:'SuFa'});
//{ name: 'SuFa', Token: 'Token' } 

通過給ajax函數動態裝飾上Token參數,而不是直接在原函數上修改參數,保證了ajax函數仍然是一個純淨的函數,提高了它的可復用性,它可在無需做任何修改的情況下直接拿到別的項目中使用。 

例子:表單驗證(把驗證輸入和表單提交的代碼分離開來,然後動態的把驗證輸入功能裝飾到表單提交之前,這樣一來,我們就可以把驗證輸入部分寫成一個插件的形式,用在不同的項目中)

 //驗證輸入函數
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('http://xxx.com/login',param);
};

formSubmit = formSubmit.before(validata);
submitBtn.onclick = function(){
  formSubmit();
}; 

參考文獻: 《JavaScript模式》 《JavaScript設計模式與開發實踐》

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved