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();

相关文章
|
4月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
5月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
59 3
|
5月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
168 1
|
2月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
31 3
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
24 2
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
3月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
51 0
|
5月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
4月前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果
|
4月前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选