Javascript中的方法链(Method Chaining)介绍


Posted in Javascript onMarch 15, 2015

在寻找如何设计一个Javascript API的时候,发现了Method Chaining这个东西,方法链,看上去似乎很强大,也挺有意思的,而这个东西也是过去我们经常看到的。。

Javascript Method Chaining

在维基百科上有这样的解释:

Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement.Chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained togethe even though line breaks are often added between methods.

拿翻译工具翻译了一下:

方法链,也被称为命名参数法,是在面向对象的编程语言调用的调用多个方法的通用语法。每一个方法返回一个对象,允许电话连接到一起,在一个单一的声明。链接是语法糖,省去了中间变量的需要。方法链也被称为火车残骸中由于方法来相继发生的同一行以上的方法都锁在即使换行通常添加方法间的数量增加。

Method Chaining 使用

目测对于方法链用得最多的,应该就是jQuery了。

// chaining

$("#person").slideDown('slow')

   .addClass('grouped')

   .css('margin-left', '11px');

我们可以用这样的用法来调用这个。jQuery严重依赖于链接。这使得它很容易调用的几个方法相同的选择。这也使得代码更清晰和防止执行相同的选择几次(提高性能)。没有方法链的时候则是下面的样子
var p = $('#person');

p.slideDown('slow');

p.addClass('grouped');

p.css('margin-left', '11px');

看上去和设计模式中的builder很像,不同的是,这里的p是方法,而不是一个类。

Javascript 方法链示例

在之前我们说到Javascript 高阶函数 的时候,说到的print('Hello')('World'),而这种用法的结果可能会变成这样子。

function f(i){

  return function(e){

    i+=e;

    return function(e){

      i+=e;

      return function(e){

        alert(i+e);

      };

    };

  };

};

f(1)(2)(3)(4); //10

这是网上的一个例子,然而也是我上一次写链式调用的作法。看上去弱爆了。
var func = (function() {

    return{

        add: function () {

            console.log('1');

            return{

                result: function () {

                    console.log('2');

                }

            }

        }

    }

})();
func.add().result();

实际上应该在每个function都要有个return this,于是就有了:
Func = (function() {

    this.add = function(){

        console.log('1');

        return this;

    };

    this.result = function(){

        console.log('2');

        return this;

    };

    return this;

});
var func = new Func();

func.add().result();

当然我们也可以将最后的两句
var func = new Func();

func.add().result();

变成
new Func().add().result();

其他

最后作为一个迷惑的地方的小比较:

Method Chaining VS prototype Chaining

原型链与方法链在某些方面上是差不多的,不同的地方或许在于

1.原型链是需要用原型
2.方法链则是用方法

Javascript 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
vue 中filter的多种用法
Apr 26 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Javascript中的apply()方法浅析
Mar 15 #Javascript
Javascript中的Callback方法浅析
Mar 15 #Javascript
Javascript中的call()方法介绍
Mar 15 #Javascript
Javascript中的高阶函数介绍
Mar 15 #Javascript
Javascript中this关键字的一些小知识
Mar 15 #Javascript
Javascript URI 解析介绍
Mar 15 #Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 #Javascript
You might like
php 无限级缓存的类的扩展
2009/03/16 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
详解Django中间件执行顺序
2018/07/16 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
学生安全教育材料
2014/02/14 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang