前言

在平時的開發中，經常會遇到一些特殊情況，就需要一些招式來應對。這里總結一下自己常用到的一些小招式，有不足歡迎大家指出。

模塊

var fuc1 = (function() {var a = 'hello ';return function(str) {return a + str;}})()fuc1('world'); // hello world

模塊模式的一般形式是：一個定義了私有變量和函數；利用閉包創建可以訪問私有變量和函數的特權函數；最后返回這個特權函數，或者把它們保存到一個可訪問的地方。

該招式有以下應用場景

協調異步

代碼需要在兩個異步fuc1與fuc2都執行結束后再執行，

var manager = (function() {var count = 0;return function() {if(++count === 2){// logic 3}} })() function fuc1() {//... } function fuc2() {//... } setTimeout(function() {fuc1();manager(); }, 10) setTimeout(function() {fuc2();manager(); }, 10)

兼容測試

var createXHR = (function () {if(typeof XMLHttpRequest != "undefined") {return function () {return new XMLHttpRequest();}}else if(typeof ActiveXObject != "undefined") {return function () {if(typeof arguments.callee.activeXString != "string") {var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],i,len;for(1 = 0, len = versions.length; i < len; i++){try{new ActiveXObject(versions[i]);arguments.callee.activeXString = versions[i];break;}catch(ex){// ...}}}return new ActiveXObject(arguments.callee.activeXString);}}else{return function() {throw new Error("NO XHR object available.");}} })();

利用私有變量

var parse = (function() {var config = ['I', 'II', 'III', 'IV'];return function(num) {return config[num - 1]} })() parse(1); // I parse(4); // IV

柯里化

柯里化聽起來很高大上，然而也就是Currying的音譯，千萬別被名稱嚇跑了。
它是把接受多個參數的函數中的參數拆分成兩次調用來傳遞并返回結果的新函數。
舉一個簡單的例子理解一下：

var add = function(a, b) {return a + b } add(1, 2) // 3var currying = function(a) {return function(b) {return a + b} } currying(1)(2) // 3

add 為 接受多個參數的函數,currying是將add中的參數分兩次調用傳入并返回結果的新函數。

仔細想想，它其實是模塊的衍生招式。模塊的私有變量是預先定義好的，而柯里化是保存第一次調用時傳入的參數為私有變量。因此它倆的區別是私有變量定義時機不同。

下面是一個利用柯里化實現的累加方法

var currying = function (fn) {var args = [];return function () {var innerArgs = Array.prototype.slice.call(arguments);if(innerArgs.length === 0){return fn.apply(null, args)}args = args.concat(innerArgs);return arguments.callee;} }var mutil = function () {var num = 0, i = 0;while(arguments[i]){num += arguments[i++]}return num }var add = currying(mutil);add(1,2)(3); add(4);add(); // 10

函數節流

某些代碼不可以在沒有間斷的情況下連續重復執行，所有就需要節流。比如：拖動某DOM元素時，需要動態改變元素的 x y ,就需要用到節流函數了。

function throttle(method, delay) {var timer = null;return function () {var that = this, args = arguments;clearTimeout(method.tId);timer = setTimeout(function () {method.apply(that, args);clearTimeout(timer);}, delay);} } window.onresize = throttle(resizeHandle, 50)

使用該函數時你會發現一個問題：不斷拖動元素的過程中元素是不動的，只有停頓一下元素才跟著動。
這樣的體驗很糟糕，為了提高性能、改善體驗，需要升級一下節流函數。設置一個最大時間間隔來確保在拖動的過程中，元素可以跟隨移動。

function throttle(method, context, delay, maxInterval) {var _start,_diff,timer;return function () {var that = this,args = arguments,_now = +new Date();clearTimeout(timer);_start || (_start = _now);if(_now - _start >= maxInterval){method.apply(that, args)}else{timer = setTimeout(function () {method.apply(that, args)}, delay)}} } window.onresize = throttle(resizeHandle, 50, 100)

延遲加載處理

在業務中經常會遇到一些不需要同步處理的，又比較耗時的邏輯。對于這些邏輯可以采用數據分塊（array chunking）的技術，小塊小塊地處理數組，通常每次一小塊。可以創建一個“待辦事項”隊列，然后使用定時器逐個取出“事項”，接著設置另一個定時器。

function chunk(array, process, context) {setTimeout(function() {var item = array.shift();process.call(context, item);if(array.length > 0){setTimeout(arguments.callee, 100);}}, 100) }

記憶函數

函數可以將先前操作的結果記錄在某個對象里，從而避免重復運算，比如計算階乘函數。

function memoizer(memory, handle) {return function (n) {var result = memory[n],recur = arguments.callee;// 已運算過則直接返回if(!result){result = handle(recur ,n);memory[n] = result;}return result;} }var memory = [1, 1],factorial = memoizer(memory, function (recur, n) {return n * recur(n - 1)});factorial(4);console.log(memory); // [1, 1, 2, 6, 24]

（未完待續......）

總結

以上是生活随笔為你收集整理的javascript招式总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。