摘要：設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐讀書(shū)筆記最近利用碎片時(shí)間在上面閱讀設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐讀書(shū)這本書(shū)，剛開(kāi)始閱讀前兩章內(nèi)容，和大家分享下我覺(jué)得可以在項(xiàng)目中用的上的一些筆記。事件綁定暫時(shí)這么多，以后會(huì)不定期更新一些關(guān)于我讀這本書(shū)的筆記內(nèi)容

最近利用碎片時(shí)間在 Kindle 上面閱讀《JavaScript 設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐讀書(shū)》這本書(shū)，剛開(kāi)始閱讀前兩章內(nèi)容，和大家分享下我覺(jué)得可以在項(xiàng)目中用的上的一些筆記。

我的 github 項(xiàng)目會(huì)不定時(shí)更新，有需要的同學(xué)可以移步到我的 github 中去查看源碼：https://github.com/lichenbuliren/design-mode-notes

currying 又稱部分求值。一個(gè) currying 的函數(shù)首先會(huì)接受一些參數(shù)，接受了這些參數(shù)之后，該函數(shù)并不會(huì)立即求值，而是繼續(xù)返回另外一個(gè)函數(shù)，將剛才傳入的參數(shù)在函數(shù)形成的閉包中被保存起來(lái)。待到函數(shù)被真正需要求值的時(shí)候，之前傳入的所有參數(shù)都會(huì)被一次性的用于求值。

假設(shè)我們需要編寫(xiě)一個(gè)計(jì)算每個(gè)月開(kāi)銷(xiāo)的函數(shù)，在每天結(jié)束之前，我們要記錄每天花掉了多少錢(qián)。

通用 currying 函數(shù)：

var currying = function(fn) {
  var args = [];

  return function() {
    if (arguments.length === 0) {
      return fn.apply(this, args);
    } else {
      [].push.apply(args, arguments);
      // 返回函數(shù)本身，這里指向 return 后面的匿名函數(shù)！
      return arguments.callee;
    }
  }
};

var cost = (function() {
  // 閉包存儲(chǔ)最后的值
  var money = 0;

  return function() {
    for (var i = 0, len = arguments.length; i < len; i++) {
      money += arguments[i];
    }

    return money;
  }
})();

// 轉(zhuǎn)化成 currying 函數(shù)
// 這個(gè)時(shí)候，閉包內(nèi)部的 fn 指向真正的求值函數(shù)
// 也就是 cost 自運(yùn)行的時(shí)候返回的匿名函數(shù)
var cost = currying(cost);

cost(200);
cost(300);
cost(500);

// 求值輸出
console.log(cost());

Function.prototype.uncurrying = function() {
  // 此時(shí) selft 是后面例子中的 Array.prototype.push;
  var self = this;

  return function() {
    // arguments: { "0": { "0": 1, length: 1 }, "1": 2 }
    var obj = Array.prototype.shift.call(arguments);
    return self.apply(obj, arguments);
  }
};

// 另外一種實(shí)現(xiàn)方式
Function.prototype.uncurrying = function() {
  var self = this;

  return function() {
    return Function.prototype.call.apply(self, arguments);
  }
};

var push = Array.prototype.push.uncurrying();

var obj = {
  "length": 1,
  "0": 1
};

push(obj, 2);
console.log(obj);

JavaScript 中的函數(shù)大多數(shù)情況下都是由用戶主動(dòng)調(diào)用觸發(fā)的，除非是函數(shù)本身的實(shí)現(xiàn)不合理，否則我們一般不會(huì)遇到跟性能相關(guān)的問(wèn)題。但是在一些少數(shù)情況下，函數(shù)的觸發(fā)不是有由用戶直接控制的。在這些場(chǎng)景下，函數(shù)有可能被非常頻繁的調(diào)用，而造成大的性能問(wèn)題。

函數(shù)被頻繁調(diào)用的場(chǎng)景：

window.onresize 事件

mousemove 事件

上傳進(jìn)度

上面三個(gè)提到的場(chǎng)景，可以發(fā)現(xiàn)它們面臨的共同問(wèn)題是函數(shù)被觸發(fā)的頻率太高。

比如我們?cè)?window.onresize 事件中要打印當(dāng)前瀏覽器窗口大小，在我們拖拽改變窗口大小的時(shí)候，控制臺(tái)1秒鐘進(jìn)行了 10 次。而我們實(shí)際上只需要 2 次或者 3 次。這就需要我們按時(shí)間段來(lái)忽略掉一些事件請(qǐng)求，比如確保在 500ms 內(nèi)打印一次。很顯然，我們可以借助 setTimeout 來(lái)完成。

/**
 * 函數(shù)節(jié)流實(shí)現(xiàn)
 * @param  {Function} fn       需要節(jié)流執(zhí)行的函數(shù)
 * @param  {[type]}   interval 事件執(zhí)行間隔時(shí)間，單位 ms
 * @return {[type]}            [description]
 */
var throttle = function(fn, interval) {
  var _self = fn,
      timer,
      firstTime = true;

  console.log(_self);

  return function() {
    var args = arguments,
        _me = this;  // 這里代表當(dāng)前的匿名函數(shù)

    console.log(_me);

    if (firstTime) {
      _self.apply(_me, args);
      return firstTime = false;
    }

    if (timer) {
      return false;
    }

    timer = setTimeout(function() {
      clearTimeout(timer);
      timer = null;
      _self.apply(_me, args);
    }, interval || 500);
  };
};

window.onresize = throttle(function() {
  console.log("test");
}, 500);

我們經(jīng)常會(huì)遇到這么一種情況，某些函數(shù)確實(shí)是用戶主動(dòng)調(diào)用的，但是因?yàn)橐恍┛陀^原因，這些函數(shù)會(huì)嚴(yán)重地影響頁(yè)面性能。

一個(gè)例子就是創(chuàng)建 WebQQ 的 QQ 好友列表。列表中通常會(huì)有成百上千個(gè)好友，如果一個(gè)好友用一個(gè)節(jié)點(diǎn)來(lái)表示，當(dāng)我們?cè)陧?yè)面中渲染這個(gè)列表的時(shí)候，可能要一次性往頁(yè)面中創(chuàng)建成百上千個(gè)節(jié)點(diǎn)。

在短時(shí)間內(nèi)往頁(yè)面中大量添加 DOM 節(jié)點(diǎn)顯然也會(huì)讓瀏覽器吃不消，我們看到的結(jié)果往往就是瀏覽器的卡頓甚至假死。所以我們需要一個(gè)分時(shí)函數(shù)來(lái)解決這個(gè)問(wèn)題

/**
 * 分時(shí)函數(shù)例子
 * 以創(chuàng)建 WebQQ 列表為例
 * @param  {[type]}   data     函數(shù)執(zhí)行需要用到的數(shù)據(jù)
 * @param  {Function} fn       真正需要分時(shí)執(zhí)行的函數(shù)
 * @param  {[type]}   count    每次創(chuàng)建一批節(jié)點(diǎn)的數(shù)量
 * @param  {[type]}   interval 函數(shù)執(zhí)行間隔
 * @return {[type]}            [description]
 */
var timeChunk = function(data, fn, count, interval) {
  var t;

  var len = data.length;

  var start = function() {
    for (var i = 0; i < Math.min(count || 1, data.length); i++) {
      var obj = data.shift();
      fn(obj);
    }
  }

  return function() {
    t = setInterval(function() {
      if (data.length === 0) {
        return clearInterval(t);
      }

      start();
    }, interval);
  }
}

以創(chuàng)建事件綁定函數(shù)為例：
在進(jìn)入第一個(gè)條件分支之后，在函數(shù)內(nèi)部重寫(xiě)這個(gè)函數(shù)，重寫(xiě)之后，就是我們所需要的函數(shù)，在下一次進(jìn)入的時(shí)候，就不再需要判斷了。

/**
 * 事件綁定
 * @param {[type]} el      [description]
 * @param {[type]} type    [description]
 * @param {[type]} handler [description]
 */
var addEvent = function(el, type, handler) {
  if (window.addEventListener) {
    addEvent = function(el, type, handler) {
      el.addEventListener(type, handler, false);
    }
  } else if (window.attachEvent) {
    addEvent = function(el, type, handler) {
      el.attachEvent("on" + type, handler);
    }
  }

  addEvent(el, type, handler);
}

暫時(shí)這么多，以后會(huì)不定期更新一些關(guān)于我讀這本書(shū)的筆記內(nèi)容！