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


Posted in Javascript onMarch 04, 2015

介绍

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

Javascript 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
jquery 模板的应用示例
Nov 12 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
js图片切换具体实现代码
Oct 13 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
详解JavaScript 的变量
Mar 08 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 #Javascript
jQuery中大家不太了解的几个方法
Mar 04 #Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 #Javascript
js计算德州扑克牌面值的方法
Mar 04 #Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 #Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 #Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 #Javascript
You might like
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
初品cakephp 入门基础
2012/02/16 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php实现的通用图片处理类
2015/03/24 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
微信小程序开发探究
2016/12/27 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python根据区号生成手机号码的方法
2015/07/08 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python类成员继承重写的实现
2020/09/16 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
python空元组在all中返回结果详解
2020/12/15 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
个人课题方案
2014/05/08 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书