[Effective JavaScript 笔记]第60条:支持方法链

无状态的API的部分能力是将复杂操作分解为更小的操作的灵活性。一个很好的例子是字符串的replace方法。由于结果本身也是字符串,可以对前一个replace操作重复执行替换。这种模式的一个常见用例是在将字符串插入到HTML前替换字符串的特殊字符字母。

function escapeBasicHTML(str){
    return str.replace(/&/g,"&")
              .replace(/< /g,"&lt;")
              .replace(/>/g,"&gt;")
              .replace(/"/g,"&quot;")
              .replace(/'/g,"&apos;");
}

对replace的第一次调用返回一个将所有特殊字符"&"替换为HTML字符串的转义序列“&”的字符串;以此类推。这种重复的方法调用风格叫做方法链。这种风格不需要保存中间结果为变量,更简洁。jquery就是一个很好的例子。

function escapeBasicHTML(str){
    var str2=str.replace(/&/g,"&amp;")
    var str3=str2.replace(/< /g,"&lt;")
    var str4=str3.replace(/>/g,"&gt;")
    var str5=str4.replace(/"/g,"&quot;")
    var str6=str5.replace(/'/g,"&apos;");
    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来支持方法链

posted @ 2016-07-11 17:55  脚后跟着猫  阅读(261)  评论(0编辑  收藏  举报
返回
顶部