什么是链式调用

这个很容易理解,例如:

$(this).setStyle('color', 'red').show();

分解链式调用

链式调用其实是两个部分:

1.操作对象(也就是被操作的DOM元素,如上例的$(this))

2.操作方法(具体要做什么事情,如上例的setStyle和show)

如何生成操作对象与操作方法

一般的$函数:

function $(){
var elements = [];
for(var i= 0,len=arguments.length; i<len; i++){
var element = arguments[i];
if(typeof element==='string'){
element = document.getElementById(element);
}
if(arguments.length==1){
return element;
}
elements.push(element);
}
return elements;
}

但是,如果把这个函数改造为一个构造器,把那些元素作为数组保存在一个实例属性中,

并让所有定义在构造函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用(说了这么多,就是在每个方法最后return this;),

这样以来,它就具有了进行链式调用的能力。

改造后如下:

(function(){
function _$(els){
this.elements = [];//把那些元素作为数组保存在一个实例属性中,
for(var i= 0, len=els.length; i<len; i++){
var element = els[i];
if(typeof element==='string'){
element = document.getElementById(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; //在每个方法的最后return this;
},
setStyle: function(prop, val){
this.each(function(el){
el.style[prop] = val;
});
return this; //在每个方法的最后return this;
},
show: function(){
var that = this;
this.each(function(el){
that.setStyle('display', 'block');
});
return this; //在每个方法的最后return this;
},
addEvent: function(type, fn){
var add = function(el){
if(window.addEventListener){
el.addEventListener(type, fn, false);
}else if(window.attachEvent){
el.addEvent('on'+type, fn);
}
};
this.each(function(el){
add(el);
});
return this; //在每个方法的最后return this;
}
}
window.$ = function(){
return new _$(arguments);
}
})();

在最后return this,这就将调用方法的对象传给调用链上的下一个方法。

使用回调函数从支持链式调用的方法获取数据

链式调用很适合于赋值器方法,但对于取值器方法,就不方便了,因为每个方法返回的都是this啊。

不过,变通的方法还是有的,那就是回调函数。

未使用回调函数时

//without callback
window.API = window.API || function(){
var name = 'JChen';
this.setName = function(newName){
name = newName;
return this;
};
this.getName = function(){
return name;
};
};
var o = new API();
console.log(o.getName());
console.log(o.setName('Haha').getName());

使用回调函数时

//with callback
window.API2 = window.API2 || function(){
var name = 'JChen';
this.setName = function(newName){
name = newName;
return this;
};
this.getName = function(callback){
callback.call(this, name);
return this;
};
};
var o2 = new API2();
o2.getName(console.log).setName('Hehe').getName(console.log);

总结

链式调用这种风格有助于简化代码的编写工作,让代码更加简洁、易读,同时也避免多次重复使用一个对象变量。

纠正

在使用回调函数时候callback.call(this, name)在一般情况下是没问题的,但是,这个例子偏偏用到了console.log,那么就有问题了。原因是console的this是指向console而不是winodw。

这个问题也很好解决。如下:

//with callback
window.API2 = window.API2 || function(){
var name = 'JChen';
this.setName = function(newName){
name = newName;
return this;
};
this.getName = function(callback){
callback.call(this, name);
return this;
};
};
var o2 = new API2();
var log = function(para){
console.log(para);
};
o2.getName(log).setName('Hehe').getName(log);

JS设计模式——6.方法的链式调用的更多相关文章

  1. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  2. JavaScript设计模式——方法的链式调用

    方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...

  3. js实现方法的链式调用

    假如这里有三个方法:person.unmerried();person.process();person.married();在jQuery中通常的写法是:person.unmerried().pro ...

  4. 《javascript设计模式》笔记之第六章:方法的链式调用

    这一章要实现的就是jQuery的那种链式调用,例子: $(this).setStyle('color', 'green').show(); 一:调用链的结构: 首先我们来看一下最简单的$()函数的实现 ...

  5. 浅析 JavaScript 链式调用

    对$函数你已经很熟悉了.它通常返回一个html元素或一个html元素的集合,如下: function$(){ var elements = []; for(vari=0,len=arguments.l ...

  6. js原生设计模式——2面向对象编程之js原生的链式调用

    技巧点:对象方法中返回当前对象就可以链式调用了,即方法中写return this; <!DOCTYPE html><html lang="en"><h ...

  7. js简单实现链式调用

    链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show ...

  8. 玩一把JS的链式调用

    链式调用我们平常用到很多,比如jQuery中的$(ele).show().find(child).hide(),再比如angularjs中的$http.get(url).success(fn_s).e ...

  9. JavaScript设计模式-8.链式调用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Navicat for MySQL和Navicat Premium之间的区别

    首先两款软件都可以用来管理数据库链接MySQL和MariaDB 相对于新手或者前端工程师使用Navicat for MySQL就够了,功能相对于Navicat Premium比较少Navicat fo ...

  2. .net对Redis集群的调用(FrameWork版本4.0)

    使用 StackExchange.Redis 实现.net对Redis集群的调用,方法如下: 1.打开 项目-管理NuGet程序包 2.在打开界面搜索StackExchange.Redis,找到Sta ...

  3. MySQL复合主键下ON DUPLICATE KEY UPDATE语句失效问题

    问题的起因,假设有一张表,里面保存了交易订单,每张订单有唯一的ID,有最后更新时间,还有数据,详情如下: 1 2 3 4 5 6 7 +-------+----------+------+-----+ ...

  4. nowcoder 203A Knight(贪心+打表)

    题目链接 题目描述 有一张无限大的棋盘,你要将马从(0,0)移到(n,m). 每一步中,如果马在(x,y),你可以将它移动到(x+1,y+2),(x+1,y-2),(x-1,y+2),(x-1,y-2 ...

  5. Visual Categorization with Bags of Keypoints

    1.Introduction and backgrounds 作为本周的论文之一,这是一篇bag of features的基本文章之一,主要了解其中的基本思路,以及用到的基本技术,尽量使得细节更加清楚 ...

  6. CentOS6.7的安装

    VMware9的安装请阅读:  http://www.cnblogs.com/duanji/p/yueding.html CentOS6.7在VMware9中安装 1.启动VMware的画面 2.点击 ...

  7. 【刷题】BZOJ 3732 Network

    Description 给你N个点的无向图 (1 <= N <= 15,000),记为:1-N. 图中有M条边 (1 <= M <= 30,000) ,第j条边的长度为: d_ ...

  8. 【XSY1841】Intervals

    Description 在一个长度为m的序列中选出n个区间,这些区间互不包含,且至少有一个区间的左端点为x. 问有多少种方案,注意交换两个区间的顺序视为不同方案. ​ 答案很大,输出模10000000 ...

  9. 解题:USACO13NOV Empty Stalls

    题面 当然可以用并查集做,不过你需要按秩合并+路径压缩(才可能过),因为数据范围十分不友好...... USACO的官方做法更为优秀.首先题目告诉我们牛们加入的前后顺序不影响结果(自己证明也很容易,显 ...

  10. 【贪心】【CF1061D】 TV Shows

    Description 给定 \(n\) 个电视节目和两个参数 \(x,y\).你想要看全部的电视节目,但是同一个电视机同一个时刻只能播放一个电视节目,所以你只能多租赁电视机.在时间 \([l,r]\ ...