深入理解JavaScript系列(49):Function模式(上篇)

來源:互聯網
上載者:User
介紹

本篇主要是介紹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

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.