介紹
本篇主要是介紹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);
});
總結
JavaScript裡的Function有很多特殊的功效,可以利用閉包以及arguments參數特性實現很多不同的技巧,下一篇我們將繼續介紹利用Function進行初始化的技巧。