DIV CSS 佈局教程網

本文實例講述了Javascript裝飾器函數(Decorator)。分享給大家供大家參考，具體如下：

裝飾器函數(Decorator)用於給對象在運行期間動態的增加某個功能，職責等。相較通過繼承的方式來擴充對象的功能，裝飾器顯得更加靈活，首先，我們可以動態給對象選定某個裝飾器，而不用hardcore繼承對象來實現某個功能點。其次：繼承的方式可能會導致子類繁多，僅僅為了增加某一個單一的功能點，顯得有些多余了。

下面給出幾個常用的裝飾器函數示例，相關代碼請查看github。

1 動態添加onload監聽函數

function addLoadEvent(fn) {
  var oldEvent = window.onload;
  if(typeof window.onload != 'function') {
    window.onload = fn;
  }else {
    window.onload = function() {
      oldEvent();
      fn();
    };
  }
}
function fn1() {
  console.log('onloadFunc 1');
}
function fn2() {
  console.log('onloadFunc 2');
}
function fn3() {
  console.log('onloadFunc 3');
}
addLoadEvent(fn1);
addLoadEvent(fn2);
addLoadEvent(fn3);

2 前置執行函數和後置執行函數

Function.prototype.before = function(beforfunc) {
  var self = this;
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    beforfunc.apply(this, innerArgs);
    self.apply(this, outerArgs);
  };
};
Function.prototype.after = function(afterfunc) {
  var self = this;
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    self.apply(this, outerArgs);
    afterfunc.apply(this, innerArgs);
  };
};
var func = function(name){
  console.log('I am ' + name);
};
var beforefunc = function(age){
  console.log('I am ' + age + ' years old');
};
var afterfunc = function(gender){
  console.log('I am a ' + gender);
};
var beforeFunc = func.before(beforefunc, 'Andy');
var afterFunc = func.after(afterfunc, 'Andy');
beforeFunc('12');
afterFunc('boy');

執行結果，控制台打印如下：

I am 12 years old
I am Andy
I am Andy
I am a boy

3 函數執行時間計算

function log(func){
  return function(...args){
    const start = Date.now();
    let result = func(...args);
    const used = Date.now() - start;
    console.log(`call ${func.name} (${args}) used ${used} ms.`);
    return result;
  };
}
function calculate(times){
  let sum = 0;
  let i = 1;
  while(i < times){
    sum += i;
    i++;
  }
  return sum;
}
runCalculate = log(calculate);
let result = runCalculate(100000);
console.log(result);

注：這裡我使用了ES2015（ES6）語法，如果你感興趣可以查看前面關於ES6的相關內容。

當然，裝飾器函數不僅僅這些用法。天貓使用的Nodejs框架Koa就基於裝飾器函數及ES2015的Generator。希望這篇文章能起到拋磚引玉的作用，使你編寫更優雅的JS代碼。

更多關於Javascript相關內容可查看本站專題：《javascript面向對象入門教程》、《Javascript中json操作技巧總結》、《Javascript切換特效與技巧總結》、《Javascript查找算法技巧總結》、《Javascript動畫特效與技巧匯總》、《Javascript錯誤與調試技巧總結》、《Javascript數據結構與算法技巧總結》、《Javascript遍歷算法與技巧總結》及《Javascript數學運算用法總結》

希望本文所述對大家Javascript程序設計有所幫助。