上次我们简单的说了下单例的用法,这个也是在我们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");
})
})
})
})()
上边的例子也简单的说明了下,希望对大家有帮助,有什么问题及时交流。
分享到:
相关推荐
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript网页开发——体验式学习教程.pdf JavaScript网页开发——体验式学习教程.pdf
详解JavaScript中的链式调用 链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。 描述 链式调用在JavaScript语言中很常见,如jQuery、...
PDF格式的javascript学习资料,希望对你有所帮助
格式化-function与小括号间留空格。链式调用不换行 文章链接https://editor.csdn.net/md/?articleId=103597199
JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单
链式调用在 JavaScript 语言界很常见,如 jQuery 、 Promise 等,都是使用的链式调用。链式调用可以让我们在进行连续操作时,写出更简洁的代码。 new Promise((resolve, reject) => { resolve(); }) .then(() =...
JavaScript凌厉开发——Ext JS3详解与实践JavaScript凌厉开发——Ext JS3详解与实践
JavaScript凌厉开发——Ext详解与实践
链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码...
javascript 支持链式调用的异步调用框架Async.Operation.docx
JavaScript实战手册——第七版代码 对应书籍 http://download.csdn.net/detail/yyysuki/3704463 【此书为英文原版
张孝祥老师生前鸿篇巨著。包括html,CSS,DOM编程,javaScrip语法,脚本编程的相关技术,正则表达式。
Applet与Javascript的对话——让你的Javascript代码和Java Applet融洽地合作.pdf
JavaScript凌厉开发——Ext详解与实践_源码清单.rarJavaScript凌厉开发——Ext详解与实践_源码清单.rarJavaScript凌厉开发——Ext详解与实践_源码清单.rar
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part1 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part4 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part2 因为源代码比较大,压缩后76M左右 所以分为四个包上传
C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用