DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 深入理解JavaScript系列(49):Function模式(上篇)
深入理解JavaScript系列(49):Function模式(上篇)
編輯:關於JavaScript     

介紹

本篇主要是介紹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進行初始化的技巧。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved