[Effective JavaScript 笔记]第60条:支持方法链
无状态的API的部分能力是将复杂操作分解为更小的操作的灵活性。一个很好的例子是字符串的replace方法。由于结果本身也是字符串,可以对前一个replace操作重复执行替换。这种模式的一个常见用例是在将字符串插入到HTML前替换字符串的特殊字符字母。
function escapeBasicHTML(str){
return str.replace(/&/g,"&")
.replace(/< /g,"<")
.replace(/>/g,">")
.replace(/"/g,""")
.replace(/'/g,"'");
}
对replace的第一次调用返回一个将所有特殊字符"&"替换为HTML字符串的转义序列“&”的字符串;以此类推。这种重复的方法调用风格叫做方法链。这种风格不需要保存中间结果为变量,更简洁。jquery就是一个很好的例子。
function escapeBasicHTML(str){
var str2=str.replace(/&/g,"&")
var str3=str2.replace(/< /g,"<")
var str4=str3.replace(/>/g,">")
var str5=str4.replace(/"/g,""")
var str6=str5.replace(/'/g,"'");
return str6;
}
消除临时变量使代码变得更加可读,中间结果只是得到最终结果中的一个重要的步骤而已。
如果一个API产生了一个接口对象,调用这个接口对象的方法产生的对象如果具有相同的接口,那么就可以使用方法链。如前面50条和51条中描述的数组迭代方法就是另一个链式API。
var users=records.map(function(record){
return record.username;
})
.filter(function(username){
return !!username;
})
.map(function(username){
return username.toLowerCase();
});
因为数组的每一种迭代方法,返回得都是一个数组。可以方便地再使用数组方法进行处理。
这种风格非常灵活,并且对于API的使用者富有表现力,所以将API设计为支持这种风格是值得的。
通常情况下,
无状态的API中,如果API不修改对象,而是返回一个新对象,则链式得到了自然的结果。因此,API的方法提供了更多相似方法集的对象。
有状态的API中,这里的技巧是方法在更新对象时返回this,而不是undefined。这使得通过链式方法调用的序列来对同一个对象执行多次更新成为可能。
element.setBackgroundColor('yellow')
.setColor('red')
.setFontWeight('bold');
有状态的API的方法有时被称为流畅式。如果更新方法没返回this,那么API的调用者不得不每次重复该对象的名称。如果该对象被简单命名为一个变量,这没有什么区别。但当结合无状态的方法用于检索更新的对象,方法链非常简洁,并且代码更可读。jquery中的方法普遍采用这种方法。它有一组(无状态的)方法用于从用户界面元素中查询网页,还有一组(有状态的)方法用于更新这些元素。
$('#notification')
.html('Server not responding.')
.removeClass('info')
.addClass('error');
通过调用有状态的html,removeClass,addClass方法而返回相同对象来支持流畅式,不用创建临时变量存储jQuery函数执行查询的结果。如果觉得这种风格不太习惯,也可以添加中间变量来存储各函数的返回值。
var element=$('#notification');
element.html('Server not responding.');
element.removeClass('info');
element.addClass('error');
通过支持方法链,API允许程序员按自己的喜好选择风格。如果方法返回undefined,用户会被强迫使用更啰嗦的风格。
提示
使用方法链来连接无状态的操作
通过在无状态的方法中返回新对象来支持方法链
通过在有状态的方法中返回this来支持方法链
[Effective JavaScript 笔记]第60条:支持方法链的更多相关文章
- [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
- [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- [Effective JavaScript 笔记]第42条:避免使用轻率的猴子补丁
41条对违反抽象原则行为的讨论之后,下面聊一聊终极违例.由于对象共享原型,因此每一个对象都可以增加.删除或修改原型的属性.这个有争议的实践通常称为猴子补丁. 猴子补丁示例 猴子补丁的吸引力在于其强大. ...
- [Effective JavaScript 笔记]第68条:使用promise模式清洁异步逻辑
构建异步API的一种流行的替代方式是使用promise(有时也被称为deferred或future)模式.已经在本章讨论过的异步API使用回调函数作为参数. downloadAsync('file.t ...
- [Effective JavaScript 笔记]第65条:不要在计算时阻塞事件队列
第61条解释了异步API怎样帮助我们防止一段程序阻塞应用程序的事件队列.使用下面代码,可以很容易使一个应用程序陷入泥潭. while(true){} 而且它并不需要一个无限循环来写一个缓慢的程序.代码 ...
- [Effective JavaScript 笔记] 第2条:理解JavaScript的浮点数
JavaScript数值型类型只有数字 js只有一种数值型数据类型,不管是整数还是浮点数,js都把归为数字. typeof 17; // “number” typeof 98.6; // “num ...
- [Effective JavaScript 笔记]第22条:使用arguments创建可变参数的函数
第21条讲述使用可变参数的函数average.该函数可处理任意数量的参数并返回这些参数的平均值. 如何创建可变参数的函数 1.实现固定元数的函数 书上的版本 function averageOfArr ...
随机推荐
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- Bootstrap系列 -- 31.嵌套分组
我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果.使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级 <di ...
- [C#]Attribute特性(2)——方法的特性及特性参数
上篇博文[C#]Attribute特性介绍了特性的定义,类的特性,字段的特性,这篇博文将介绍方法的特性及特性参数相关概念. 3.方法的特性 之所以将这部分单列出来进行讨论,是因为对方法的特性查询的反射 ...
- [设计模式] javascript 之 代理模式
代理模式说明 说明:顾名思义就是用一个类来代替另一个类来执行方法功能,这个模式跟装饰模式有点相似,不一样的是,代理模式是代替客户初始化被代理对象类,而装饰模式采用接口或初装饰者参数引用的方式来执行的. ...
- Nodejs学习笔记(七)--- Node.js + Express 构建网站简单示例
目录 前言 新建项目.建立数据库以及其它准备工作 新建express + ejs 项目:sampleEjs 创建数据库 修改package.json文件,安装session和mysql模块 样式和JQ ...
- Code Hunters: Hello, world!
大家好!我们是来自MSRA联合培养班的Code Hunters小组,在未来三个月时间里我们将与殷秋丰老师一起学习高级软件工程这门课. 我们小组共有五名分别来自享誉海内外的中国科学技术大学和北京航空航天 ...
- SQL基础知识总结(一)
1.union 和union all 操作符 1)union内部的select语句必须拥有相同的列,列也必须有相似的数字类型.同时,每条select语句中列的顺序相同. union语法(结果集无重复) ...
- JS Jquery去除数组重复元素
js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...
- 【bzoj1013】 JSOI2008—球形空间产生器sphere
www.lydsy.com/JudgeOnline/problem.php?id=1013 (题目链接) 题意 有一个n维的球体,给出球上n+1个点,求出圆心. Solution 题中给出了对于n维空 ...
- BZOJ1086 [SCOI2005]王室联邦
Description “余”人国的国王想重新编制他的国家.他想把他的国家划分成若干个省,每个省都由他们王室联邦的一个成 员来管理.他的国家有n个城市,编号为1..n.一些城市之间有道路相连,任意两个 ...