JS编程建议——68:推荐使用链式语法

简介: 68:推荐使用链式语法

建议68:推荐使用链式语法
使用过jQuery框架的读者,都会对jQuery简洁的语法、灵巧的用法赞叹不已,其中一个最大亮点就是jQuery的链式语法。在JavaScript中,很多方法没有返回值,一些设置或修改对象的某个状态却不返回任何值的方法就是典型的例子。如果让这些方法返回this,而不是undefined,那么就要启用级联功能,即所谓的链式语法。在一个级联中,单独一条语句可以连续调用同一个对象的很多方法。
getElement('box').

move(350, 150).
width(100).height(100).
color('red').
border('10px outset').
padding('4px').
appendText("使用链式语法")

在上面代码中,getElement函数获取id='box'的DOM元素,然后通过链式语法分别调用DOM元素的扩展方法来移动元素、修改尺寸和样式,以及添加行为。由于每一个扩展方法都返回参数对象,所以调用返回的结果可以为下一次调用所用。链式语法可以产生具备很强表现力的接口,以产生出试图一次做很多事情的接口的趋势。
在下面示例中,分别为String扩展了3个方法:trim、writeln和alert,其中writeln和alert方法返回值都为this,而trim方法返回值为修剪后的字符串。这样用户就可以利用链式语法在一行语句中快速调用这3个方法。
Function.prototype.method = function(name, func) {

if(!this.prototype[name]) {
    this.prototype[name] = func;
    return this;
}

};
String.method('trim', function() {

return this.replace(/^\s+|\s+$/g, '');

});
String.method('writeln', function() {

document.writeln(this);
return this;

});
String.method('alert', function() {

window.alert(this);
return this;

});
var str = " abc ";
str.trim().writeln().alert();

相关文章
|
2月前
|
前端开发 JavaScript 开发者
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
|
2天前
|
JavaScript 前端开发 C语言
JavaScript编程语法练习
本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.是对js的基础语法进行的一次练习,通过有趣的示例进行练习,使得对于代码能够增加印象,对于知识的掌握更加透彻.
15 2
|
4天前
|
JavaScript 前端开发
JavaScript语法(2)
【5月更文挑战第2天】JavaScript语法(2)。
12 3
|
4天前
|
存储 JavaScript 前端开发
JavaScript语法
JavaScript语法。
6 1
|
6天前
|
JavaScript 前端开发 开发者
Vue.js 模板语法
Vue.js 模板语法
|
16天前
|
XML 存储 JavaScript
JavaScript的基本语法是编程的基础
【4月更文挑战第20天】JavaScript的基本语法是编程的基础
17 5
|
2月前
|
JavaScript 前端开发 Web App开发
JavaScript基础语法(codewhy版本)(一)
JavaScript基础语法(codewhy版本)
90 1
JavaScript基础语法(codewhy版本)(一)
|
2月前
|
JavaScript 前端开发 算法
JavaScript基础语法(codewhy版本)(二)
JavaScript基础语法(codewhy版本)
20 0
JavaScript基础语法(codewhy版本)(二)
|
2月前
|
存储 JavaScript 编译器
这款国产中文编程火了!通过文言文编译生成Python、JS、Ruby代码!
这款国产中文编程火了!通过文言文编译生成Python、JS、Ruby代码!
|
2月前
|
JavaScript 前端开发 网络架构
JavaScript的数组教程(最详细,更新至es6新语法)
JavaScript的数组教程(最详细,更新至es6新语法)