《javascript设计模式》学习笔记四：Javascript面向对象程序设计链式调用实例分析
本文实例讲述了Javascript面向对象程序设计链式调用。分享给大家供大家参考，具体如下：
1.链式调用：
jquery可能是目前大家最常用到的js框架了，也习惯了如下的调用方式:
$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……
这种调用方式就叫做链式调用，也就是说在调用一个方法之后，可以使用方法的返回值来继续进行方法调用。
2.如何实现链式调用：
了解了什么是链式调用，我们再来看如何实现链式调用，从1中所述我们应该知道链式调用的关键在于方法的返回值，只要方法的返回值都是调用该方法的对象，那么，我们就可以实现链式调用了，我们仿照jquery，使用$作为对象的选择器：
(function(){
function _$(els){
this.elements = [];
for(var i=0, len=els.length;i<len;i++){
var elements = els[i];
if(typeof element = ‘string'){
element = document.getElementByIdx_x_x(element);
}
}
this.elements.push(element);
}
_$.prototype = {
each:function(fn){
for(var i=0,len=this.elements.length;i<len;i++){
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, val){
……
},
show:function(){
……
},
……
}
window.$ = function(){
return new _$(arguments);
}
})();
上面的代码就实现了一个简单的链式调用对象，并且使用一个_$作为$的别名，以防止$被其他代码改写而导致整个对象的定义丢失。
附：一个简单链式调用示例：
/*
map()
items 遍历的数组的每一项
*/
var arr = [1,2,3];
var num = arr.map(function(items){
return items + 1;
});
console.log(num);//[2,3,4 var arr = [1,2,3];
var num = arr.map(function (items) {
return items+1;
}).reduce(function (a,b) {//[2,3,4].reduce()
return a+b;
})
console.log(num);//0 --- 2+3+4 = 9]
/*
reduce 实现数组里的每个数相加,也就是给数组的每一项求总和
reduce(function(a,b){
return a+b;
},a)--a的初始值
*/
var arr = [1,2,3];
var num_1 = arr.reduce(function (a,b) {
return a+b;
})
console.log(num_1);//6
/*
链式调用
一个链子接一个链子
*/
var arr = [1,2,3];
var num = arr.map(function (items) {
return items+1;
}).reduce(function (a,b) {//[2,3,4].reduce()
return a+b;
})
console.log(num);//0 --- 2+3+4 = 9
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JavaScript的级联函数用法简单示例【链式调用】
本文实例讲述了JavaScript的级联函数用法.分享给大家供大家参考,具体如下: 级联函数 级联函数就是在对象调用中通过点的方式串联调用,在jQuery中就是链式调用, 其关键点就是在内部 return this 返回自身 应用 function Person() { this.name = ''; this.age = 0; this.weight = 10; } Person.prototype = { setName:function(name){ this.name = name; r
-
在JavaScript中实现链式调用的实现
链式调用实现本身比较简单,也有很多文章详细阐述了其实现方式.本文更多从链式调用方法返回值的角度,更进一步来说明如何实现链式调用. 什么是链式调用 链式调用在 JavaScript 语言界很常见,如 jQuery . Promise 等,都是使用的链式调用.链式调用可以让我们在进行连续操作时,写出更简洁的代码. new Promise((resolve, reject) => { resolve(); }) .then(() => { throw new Error('Something fai
-
JS链式调用的实现方法
链式调用 链式调用其实只不过是一种语法招数.它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的.该技术包括两个部分: 一个创建代表HTML元素的对象的工厂. 一批对这个HTML元素执行某些操作的方法. 调用链的结构$函数负责创建支持链式调用的对象 复制代码 代码如下: (function() { /* * 创建一个私有class * @param {Object} els arguments 所有参数组成的类数组 */ function _
-
javascript中的链式调用
jQuery中形如$("#txtName").addClass("err").css("font-size","12px").select().focus();的方式让人不得不为之着迷.其实现机制就是链式调用.链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里. 没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法. 复制代码
-
《javascript设计模式》学习笔记三：Javascript面向对象程序设计单例模式原理与实现方法分析
本文实例讲述了Javascript面向对象程序设计单例模式原理与实现方法.分享给大家供大家参考,具体如下: 1.单例模式概述 源自百度百科对于单例模式的定义: 单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 在javascript的世界里,其实没有严格的对象和类定义,"一切皆对象"使得javascript中都是对象,不能像java,c++或者php使用特定的方法返回一个实例来实现,因此对javascript来
-
学习JavaScript设计模式(链式调用)
1.什么是链式调用 这个很容易理解,例如: $(this).setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:调用完方法后,return this返回当前调用方法的对象. function Dog(){ this.run= function(){ alert("The dog is running...."); return this;//返回当前对象 Dog }; this.eat= function(){ alert("Af
-
Javascript 链式调用实现代码(参考jquery)
Javascript链式调用 function ele(){ this.elements=[]; var element; if(typeof arguments[0]=="string"){ element=arguments[0]; if (element.slice(0, 1) == '#') { element = document.getElementById(element.slice(1)); this.elements.push(element); }else if(e
-
《javascript设计模式》学习笔记一：Javascript面向对象程序设计对象成员的定义分析
本文实例讲述了Javascript面向对象程序设计对象成员的定义.分享给大家供大家参考,具体如下: 序: 刚接触javascript的时候,觉得这语言有点儿摸不着门道,感觉这玩意儿太难学了,没什么规范,没什么像样的手册,而且还跟html,dom,css打交道,更觉得一团糟,代码可读性也很差,面向过程的勉强能看懂,看面向对象的代码简直就是杯具,各种括号啊,后来了解ajax,了解了jquery,知道了很多网页特效都是用javascript写的,才慢慢有了好感,来了bd以后写javascript和ph
-
JavaScript中链式调用之研习
一.对象链:方法体内返回对象实例自身(this) 复制代码 代码如下: function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, m
-
《javascript设计模式》学习笔记二：Javascript面向对象程序设计继承用法分析
本文实例讲述了Javascript面向对象程序设计继承用法.分享给大家供大家参考,具体如下: 1.关于继承: 百度百科对继承的解释是:继承是指一个对象直接使用另一对象的属性和方法. (话说百科对于计算机概念的继承的解释也太简略了) 继承的好处,优点学过面向对象的同学都知道,就不赘述了. javascript中的继承有三种(不同的书上对这三中的名称翻译都不一样,我按照我的理解来命名吧): a.构造函数继承(类式继承,组合继承,伪经典继承) b.原型继承 c.原型赋值(遍历)继承(寄生式继承) 2.