深入理解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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
一段实用的php验证码函数
2016/05/19 PHP
phpinfo的知识点总结
2019/10/10 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
PHP之header函数详解
2021/03/02 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
浅析Python中的for 循环
2016/06/09 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
应届大学生的推荐信
2013/11/20 职场文书
教师网络培训感言
2014/03/09 职场文书
怎样填写就业意向
2014/04/02 职场文书
2014年班务工作总结
2014/12/02 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年公务员工作总结
2015/04/24 职场文书
投标售后服务承诺书
2015/04/29 职场文书
运动会广播稿200字
2015/08/19 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python