亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 語言 > JavaScript > 正文

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

2024-05-06 16:16:04
字體:
來源:轉載
供稿:網友
這篇文章主要介紹了深入理解JavaScript系列(49):Function模式(上篇),本文講解了回調函數、配置對象、返回函數、偏應用、Currying等內容,需要的朋友可以參考下
 

介紹

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


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
国产日韩中文在线| 欧美午夜性色大片在线观看| 亚洲欧美日韩一区二区三区在线| 最好看的2019年中文视频| 成年无码av片在线| 国产亚洲精品久久久久久牛牛| 亚洲欧美日韩第一区| 国产精品精品国产| 激情久久av一区av二区av三区| 日韩天堂在线视频| 日韩欧美一区二区在线| 成人亚洲综合色就1024| 一本大道久久加勒比香蕉| 成人在线一区二区| 欧美成人黑人xx视频免费观看| 亚洲国产精品免费| www国产亚洲精品久久网站| 92版电视剧仙鹤神针在线观看| 91亚洲国产成人久久精品网站| 国产最新精品视频| 成人国产精品色哟哟| 亚洲人成电影网站色…| 亚洲综合色激情五月| 欧美激情国内偷拍| 亚洲精品小视频在线观看| 欧美福利视频网站| 91久久精品美女高潮| 岛国视频午夜一区免费在线观看| 欧美电影免费播放| 国产精品人成电影在线观看| 日本久久中文字幕| 亚洲人成网站999久久久综合| 亚洲图片在线综合| 国产精品视频不卡| 亚洲美女中文字幕| 国产精品高清在线观看| 亚洲国产精品99| 欧美—级a级欧美特级ar全黄| 国产精品69av| 国产丝袜一区二区三区免费视频| 在线亚洲午夜片av大片| 久久久久久久久久久久久久久久久久av| 久久在线免费视频| 琪琪亚洲精品午夜在线| 日韩**中文字幕毛片| 欧美日本中文字幕| 97在线视频免费| 久久影院免费观看| 色999日韩欧美国产| 欧美一级电影久久| 91深夜福利视频| 欧美最顶级丰满的aⅴ艳星| 久久精品国产亚洲| 日韩人体视频一二区| 亚洲欧洲黄色网| 中文字幕欧美国内| 欧美午夜美女看片| 国产精品久久久久久久久久新婚| 色悠悠久久88| 亚洲综合第一页| 亚洲欧美制服综合另类| 欧美限制级电影在线观看| 91亚洲精品一区| 欧美裸体xxxx极品少妇软件| 成人精品一区二区三区电影黑人| 国产精品日韩在线观看| 日韩成人小视频| 亚洲精品永久免费精品| 久久久精品一区二区三区| 欧美日韩福利视频| 在线看片第一页欧美| 欧美高清在线播放| 国产婷婷色综合av蜜臀av| 国产精品一区=区| 国产不卡视频在线| 日本韩国欧美精品大片卡二| 久久久久久高潮国产精品视| 岛国视频午夜一区免费在线观看| 欧美极品美女视频网站在线观看免费| 亚洲国产欧美一区二区三区同亚洲| 国产盗摄xxxx视频xxx69| 色偷偷偷综合中文字幕;dd| 国产精品欧美激情在线播放| 亚洲影视九九影院在线观看| 成人免费激情视频| 亚洲系列中文字幕| 久久久久这里只有精品| 国产精品一区二区三区久久久| 亚洲欧美日韩爽爽影院| 亚洲欧美制服中文字幕| 久久露脸国产精品| 日韩电影中文字幕在线| 亚洲第一精品久久忘忧草社区| 精品高清美女精品国产区| 91久久嫩草影院一区二区| 国产中文日韩欧美| 久久琪琪电影院| 九色精品免费永久在线| 亚洲国产精彩中文乱码av| 久久久久久久一区二区三区| 97在线免费视频| 欧美日韩国产第一页| 亚洲国产精品中文| 日韩在线观看网址| 久久91亚洲精品中文字幕| 亚洲天堂视频在线观看| 亚洲奶大毛多的老太婆| 日韩精品小视频| 国产一区欧美二区三区| 日本一区二区三区在线播放| 国产亚洲人成网站在线观看| 国产精品九九久久久久久久| 欧美成人合集magnet| 欧美激情在线有限公司| 欧美日韩一区二区精品| 另类图片亚洲另类| 国产成人在线亚洲欧美| 日产精品99久久久久久| 国内精品久久久久久| 色一情一乱一区二区| 色婷婷av一区二区三区久久| 狠狠色狠狠色综合日日五| 欧美巨乳在线观看| 国产成人jvid在线播放| 亚洲最新av在线网站| 色中色综合影院手机版在线观看| 91精品久久久久久久久中文字幕| 欧美裸体xxxx极品少妇软件| 91网站在线看| 95av在线视频| 国产精品视频网址| 日本欧美国产在线| 亚洲在线免费观看| 日韩成人在线免费观看| 最近2019中文字幕大全第二页| 日韩中文字幕在线看| 国产一区二区三区精品久久久| 成人综合国产精品| 永久免费看mv网站入口亚洲| 欧美日韩国产精品一区二区三区四区| 精品一区二区三区四区在线| 亚洲第一区中文字幕| 欧美成人在线网站| 欧美在线视频在线播放完整版免费观看| 国产精品国产三级国产aⅴ浪潮| 日韩中文视频免费在线观看| 成人激情视频小说免费下载| 久久亚洲精品小早川怜子66| 久久6精品影院| 国产在线久久久| 91香蕉国产在线观看| 日韩电影大全免费观看2023年上| 久久精品男人天堂| 久久精品国产视频| 成人h视频在线观看播放| 黄色一区二区三区| 国产日韩一区在线| 亚洲www在线| 国产精品高清在线| 欧美理论电影网| 国产狼人综合免费视频| 国产精品最新在线观看| 亚洲系列中文字幕| 欧美精品福利在线|