javascript学习(10)——[知识储备]链式调用
上次我们简单的说了下单例的用法，这个也是在我们java中比较常见的设计模式。
今天简单说下链式调用，可能有很多人并没有听过链式调用，但是其实只要我简单的说下的话，你肯定基本上都在用，大家熟知的jQuery中我们通常都是调用完一个函数后，我们直接就继续调用其他函数，而不需要再去new一个新的对象。这就是典型的链式调用。
首先我们列举个例子，说明下并非链式调用，给我们带来的不方便的地方：
/**
* 从一个实例引出立案时调用的需求
*/
(function(){
//创建一个cat
function Cat(name){
this.name = name;
this.run = function(){
document.write(name+ " start run");
}
this.stopRun = function(){
document.write(name+ " stop run");
}
this.sing = function(){
document.write(name+ " start sing");
}
this.StopSing = function(){
document.write(name+ " stop sing");
}
}
//测试
var c = new Cat("abc");
c.run();
c.sing();
c.StopSing();
c.stopRun();
})()
下面我们举个例子说明下链式调用的好处，从而和上边非链式调用做比较：
/**
* 从一个实例引出立案时调用的需求
*/
(function(){
//创建一个cat
function Cat(name){
this.name = name;
this.run = function(){
document.write(name+ " start run");
return this;
}
this.stopRun = function(){
document.write(name+ " stop run");
return this;
}
this.sing = function(){
document.write(name+ " start sing");
return this;
}
this.StopSing = function(){
document.write(name+ " stop sing");
return this;
}
}
//测试
var c = new Cat("abc");
c.run().stopRun().sing().StopSing();
})()
以上两个例子也比较简单的说明了链式调用和非链式调用的区别。
那么下面我们模仿jquery做一个链式调用的例子：
/**
* 模仿jquery的链式调用
*/
//为了类(Function)扩展函数,我们定义一个他的静态函数
Function.prototype.method = function(name,fn){
this.prototype[name] = fn;
return this;
};
(function(){
//还记得吗他是私有变量的写法
function _$(els){};
//准备方法
_$.onready = function(obj,fn){
if(obj){
//按需求吧对象(_$)注册到window上
obj.$ = function(){
return new _$(arguments);
}
}else{
//按需求吧对象(_$)注册到window上
window.$ = function(){
return new _$(arguments);
}
}
fn();
}
//链式的对象增加jquery库提供的操作函数
_$.method("addEvent",function(type,fn){
fn();
}).method("getEvent",function(fn,e){
fn();
}).method("addClass",function(className){
fn();
}).method("removeClass",function(className){
fn();
}).method("replaceClass",function(oldClass,newClass){
fn();
}).method("getStyle",function(el,fn){
fn();
}).method("setStyle",function(el,fn){
fn();
}).method("load",function(url,fn){
fn();
});
//开始使用
var com = {};
_$.onready(com,function(){
// $("div01").addEvent("click",function(){
// alert("click Event");
// })
com.$("div01").addEvent("click",function(){
alert("click Event");
com.$(this).getEvent(function(){
alert("click getEvent");
})
})
})
})()
上边的例子也简单的说明了下，希望对大家有帮助，有什么问题及时交流。