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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
基础的prototype.js常用函数及其用法
Mar 10 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
详解如何构建Angular项目目录结构
Jul 13 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
Vue实现跑马灯样式文字横向滚动
Nov 23 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 开源框架22个简单简介
2009/08/24 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
如何运行Python程序的方法
2013/04/21 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
美发店5.1活动方案
2014/01/24 职场文书
主题酒店策划书
2014/01/28 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
励志演讲稿300字
2014/08/21 职场文书
学校创先争优活动总结
2014/08/28 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2014年司法局工作总结
2014/12/11 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2015年团支部工作总结
2015/04/03 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby