学习JavaScript设计模式(链式调用)
129 浏览量
2020-10-23
06:34:36
上传
评论
收藏 68KB PDF 举报
学习学习JavaScript设计模式设计模式(链式调用链式调用)
主要带领大家学习JavaScript设计模式，其中重点介绍链式调用，感兴趣的小伙伴们可以参考一下
1、什么是链式调用、什么是链式调用
这个很容易理解，例如:
$(this).setStyle('color', 'red').show();
一般的函数调用和链式调用的区别：调用完方法后，return this返回当前调用方法的对象。
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)
如何实现操作对象与操作方法
创建一般的$函数：
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];
评论0
最新资源