学习JavaScript设计模式(链式调用)
1、什么是链式调用
这个很容易理解，例如:
rush:js;">
$(this).setStyle('color','red').show();
一般的函数调用和链式调用的区别：调用完方法后，return this返回当前调用方法的对象。
<div class="jb51code">
<pre class="brush:js;">
function Dog(){
this.run= function(){
alert("The dog is running....");
return this;//返回当前对象 Dog
};
this.eat= function(){
alert("After running the dog is eatting....");
return this;//返回当前对象 Dog
};
this.sleep= function(){
alert("After eatting the dog is running....");
return this;//返回当前对象 Dog
};
}
//一般的调用方式；
/ var dog1 =new Dog();
dog1.run();
dog1.eat();
dog1.sleep();/
var dog2 = new Dog();
dog2.run().eat().sleep();
2、分解链式调用
链式调用其实是两个部分：
1）.操作对象(也就是被操作的DOM元素，如上例的$(this))
2）.操作方法(具体要做什么事情，如上例的setStyle和show)
如何实现操作对象与操作方法
创建一般的$函数：
rush:vb;">
function $(){
var elements = [];
for(var i= 0,len=arguments.length; i
但是，如果把这个函数改造为一个构造器，把那些元素作为数组保存在一个实例属性中，并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用，那么它就具有了链式调用的能力。(说了这么多，就是在每个方法最后return this;)，
我首先需要把这个$函数改为一个工厂方法，它负责创建支持链式调用的对象。这个函数应该能接受元素数组形式的参数，以便我们能够使用与原来一样的公用接口。这样以来，它就具有了进行链式调用的能力。
改造后如下：
<div class="jb51code">
<pre class="brush:js;">
(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,这就将调用方法的对象传给调用链上的下一个方法。
3、模拟jquery底层链式编程
<div class="jb51code">
<pre class="brush:js;">
// 块级作用域
//特点1 程序启动的时候 里面的代码直接执行了
//特点2 内部的成员变量 外部无法去访问 （除了不加var修饰的变量）
(function(window,undefined){
// $ 最常用的对象 返回给外界 大型程序开发 一般使用''作为私用的对象(规范)
function $(arguments){
//实现代码...这里仅实现ID选择器
// 正则表达式匹配id选择器
var idselector = /#\w+/ ;
this.dom ; // 此属性 接受所得到的元素
// 如果匹配成功 则接受dom元素 arguments[0] = '#inp'
if(idselector.test(arguments[0])){
this.dom = document.getElementById(arguments[0].substring(1));
} else {
throw new Error(' arguments is error !');
}
};
// 在Function类上扩展一个可以实现链式编程的方法
Function.prototype.method = function(methodName,fn){
this.prototype[methodName] = fn ;
return this ; //链式编程的关键
}
// 在_$的原型对象上 加一些公共的方法
$.prototype = {
constructor : $,addEvent:function(type,fn){
// 给你的得到的元素 注册事件
if(window.addEventListener){// FF
this.dom.addEventListener(type,fn);
} else if (window.attachEvent){// IE
this.dom.attachEvent('on'+type,fn);
}
return this ;
},setStyle:function(prop,val){
this.dom.style[prop] = val ;
return this ;
}
};
// window 上先注册一个全局变量 与外界产生关系
window.$ = _$ ;
// 写一个准备的方法
$.onReady = function(fn){
// 1 实例化出来$对象 真正的注册到window上
window.$ = function(){
return new _$(arguments);
};
// 2 执行传入进来的代码
fn();
// 3 实现链式编程
_$.method('addEvent',function(){
// nothing to do
}).method('setStyle',function(){
// nothing to do
});
};
})(window); // 程序的入口 window传入作用域中
$.onReady(function(){
var inp = $('#inp');
//alert(inp.dom.nodeName);
//alert($('#inp'));
inp.addEvent('click',function(){
alert('我被点击了!');
}).setStyle('backgroundColor','red');
});
rush:js;">
//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());
rush:js;">
//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);
rush:js;">
//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(p
ara){
console.log(p
ara);
};
o2.getName(log).setName('Hehe').getName(log);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
