介紹
本篇主要是介紹Function方面使用的一些技巧(上篇),利用Function特性可以編寫出很多非常有意思的代碼,本篇主要包括:回調模式、設定物件、返回函數、分布程式、柯裡化(Currying)。
回呼函數
在JavaScript中,當一個函數A作為另外一個函數B的其中一個參數時,則函數A稱為回呼函數,即A可以在函數B的周期內執行(開始、中間、結束時均可)。
舉例來說,有一個函數用於產生node
var complexComputation = function () { /* 內部處理,並返回一個node*/};
有一個findNodes函式宣告用於尋找所有的節點,然後通過callback回調進行執行代碼。
var findNodes = function (callback) { var nodes = []; var node = complexComputation(); // 如果回呼函數可用,則執行它 if (typeof callback === "function") { callback(node); } nodes.push(node); return nodes; };
關於callback的定義,我們可以事先定義好來用:
// 定義callback var hide = function (node) { node.style.display = "none"; }; // 尋找node,然後隱藏所有的node var hiddenNodes = findNodes(hide);
也可以直接在調用的時候使用匿名定義,如下:
// 使用匿名函數定義callback var blockNodes = findNodes(function (node) { node.style.display = 'block'; });
我們平時用的最多的,估計就數jQuery的ajax方法的調用了,通過在done/faild上定義callback,以便在ajax調用成功或者失敗的時候做進一步處理,代碼如下(本代碼基於jquery1.8版):
var menuId = $("ul.nav").first().attr("id"); var request = $.ajax({ url: "script.php", type: "POST", data: {id : menuId}, dataType: "html" }); //調用成功時的回調處理 request.done(function(msg) { $("#log").html( msg ); }); //調用失敗時的回調處理 request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); });
設定物件
如果一個函數(或方法)的參數只有一個參數,並且參數為對象字面量,我們則稱這種模式為設定物件模式。例如,如下代碼:
var conf = { username:"shichuan", first:"Chuan", last:"Shi" }; addPerson(conf);
則在addPerson內部,就可以隨意使用conf的值了,一般用於初始化工作,例如jquery裡的ajaxSetup也就是這種方式來實現的:
// 事先設定好初始值 $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); // 然後再調用 $.ajax({ data: myData });
另外,很多jquery的外掛程式也有這種形式的傳參,只不過也可以不傳,不傳的時候則就使用預設值了。
返回函數
返回函數,則是指在一個函數的傳回值為另外一個函數,或者根據特定的條件靈活建立的新函數,範例程式碼如下:
var setup = function () { console.log(1); return function () { console.log(2); }; }; // 調用setup 函數 var my = setup(); // 輸出 1 my(); // 輸出 2
// 或者直接調用也可
setup()();
或者你可以利用閉包的特性,在setup函數裡記錄一個私人的計數器數字,通過每次調用來增加計數器,代碼如下:
var setup = function () { var count = 0; return function () { return ++count; }; }; // 用法 var next = setup(); next(); // 返回 1 next(); // 返回 2 next(); // 返回 3
偏應用
這裡的偏應用,其實是將參數的傳入工作分開進行,在有的時候一系列的操作可能會有某一個或幾個參數始終完全一樣,那麼我們就可以先定義一個偏函數,然後再去執行這個函數(執行時傳入剩餘的不同參數)。
舉個例子,代碼如下:
var partialAny = (function (aps) { // 該函數是你們自執行函數運算式的結果,並且賦值給了partialAny變數 function func(fn) { var argsOrig = aps.call(arguments, 1); return function () { var args = [], argsPartial = aps.call(arguments), i = 0; // 變數所有的原始參數集, // 如果參數是partialAny._ 預留位置,則使用下一個函數參數對應的值 // 否則使用原始參數裡的值 for (; i < argsOrig.length; i++) { args[i] = argsOrig[i] === func._ ? argsPartial.shift() : argsOrig[i]; } // 如果有任何多餘的參數,則添加到尾部 return fn.apply(this, args.concat(argsPartial)); }; } // 用於預留位置設定 func._ = {}; return func; })(Array.prototype.slice);
使用方式如下:
// 定義處理函數 function hex(r, g, b) { return '#' + r + g + b; } //定義偏函數, 將hex的第一個參數r作為不變的參數值ff var redMax = partialAny(hex, 'ff', partialAny._, partialAny._); // 新函數redMax的調用方式如下,只需要傳入2個參數了: console.log(redMax('11', '22')); // "#ff1122"
如果覺得partialAny._太長,可以用__代替哦。
var __ = partialAny._; var greenMax = partialAny(hex, __, 'ff'); console.log(greenMax('33', '44')); var blueMax = partialAny(hex, __, __, 'ff'); console.log(blueMax('55', '66')); var magentaMax = partialAny(hex, 'ff', __, 'ff'); console.log(magentaMax('77'));
這樣使用,就簡潔多了吧。
Currying
Currying是函數式編程的一個特性,將多個參數的處理轉化成單個參數的處理,類似鏈式調用。
舉一個簡單的add函數的例子:
function add(x, y) { var oldx = x, oldy = y; if (typeof oldy === "undefined") { // partial return function (newy) { return oldx + newy; } } return x + y; }
這樣調用方式就可以有多種了,比如:
// 測試 typeof add(5); // "function" add(3)(4); // 7 // 也可以這樣調用 var add2000 = add(2000); add2000(10); // 2010
接下來,我們來定義一個比較通用的currying函數:
// 第一個參數為要應用的function,第二個參數是需要傳入的最少參數個數 function curry(func, minArgs) { if (minArgs == undefined) { minArgs = 1; } function funcWithArgsFrozen(frozenargs) { return function () { // 最佳化處理,如果調用時沒有參數,返回該函數本身 var args = Array.prototype.slice.call(arguments); var newArgs = frozenargs.concat(args); if (newArgs.length >= minArgs) { return func.apply(this, newArgs); } else { return funcWithArgsFrozen(newArgs); } }; } return funcWithArgsFrozen([]); }
這樣,我們就可以隨意定義我們的業務行為了,比如定義加法:
var plus = curry(function () { var result = 0; for (var i = 0; i < arguments.length; ++i) { result += arguments[i]; } return result; }, 2);
使用方式,真實多種多樣哇。
plus(3, 2) // 正常調用 plus(3) // 偏應用,返回一個函數(傳回值為3+參數值) plus(3)(2) // 完整應用(返回5) plus()(3)()()(2) // 返回 5 plus(3, 2, 4, 5) // 可以接收多個參數 plus(3)(2, 3, 5) // 同理
如下是減法的例子
var minus = curry(function (x) { var result = x; for (var i = 1; i < arguments.length; ++i) { result -= arguments[i]; } return result; }, 2);
或者如果你想交換參數的順序,你可以這樣定義
var flip = curry(function (func) { return curry(function (a, b) { return func(b, a); }, 2); });
更多資料,可以參考如下地址:
http://www.cnblogs.com/rubylouvre/archive/2009/11/09/1598761.html
http://www.cnblogs.com/sanshi/archive/2009/02/17/javascript_currying.html
總結
JavaScript裡的Function有很多特殊的功效,可以利用閉包以及arguments參數特性實現很多不同的技巧,下一篇我們將繼續介紹利用Function進行初始化的技巧。
參考地址:http://shichuan.github.com/javascript-patterns/#function-patterns
轉載:
http://www.cnblogs.com/TomXu