链式调用
链式调用是简单来讲就是 一个对象/主体 调用的方法，可以返回主体本身，可以接着去访问主体的下一个方法或者操作 ,它是一种语法招数。
用一天的时间，抽空看完一种设计模式，或者两天，还是有收获的，我们需要耐心，这个从长远来说，不算慢的。
1
2
3
4
5
// 大概这个意思
function b(dataIn) {
// ...
return dataIn;
}
链式调用可以让代码的可读性更好，代码结构更清晰，易读， 减少了代码量。如下所示对比：
1
2
3
4
5
6
7
8
baby.read();
baby.write();
baby.eatFood();
baby.sleep();
baby.read().write().eatFood().sleep()......
a.b().c() 比如我们以前用的 jquery.js,就是用的链式调用。
1
2
3
$("div").mouseover(function () {
$(this).css("color", "red");
});
jquery 中的 $(‘element’)实现代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.lenth==1){
return element;
}
elements.push(element);
}
return elements;
}
$('element').each = function(){
// xxxx
return this;
}
那么，我们 jquery 中的 方法，show,each 等方法，也是在其构造器内实现的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function(){
function _$(els){
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.lenth==1){
return element;
}
elements.push(element);
}
return elements;
}
_$.prototype = {
show:function(){
vat that = this;
this.each(function(el){
that.setStyle('display','block')
})
return this;
},
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){
this.each(function(el){
el.style[prop] = val;
})
return this;
}
}
window.$ = function(){
return new _$(arguments)
}
})()
以上就是链式调用方法。 未来我们接着开始理解设计模式中的 工厂模式