在我们所用到的库中,可以看到很多诸如
$(window).addEvent('load', function(){
$('test').show().setStyle('color', 'red').addEvent('click', function(e){
$(this).setStyle('color', 'yellow');
});
});
的链式调用,那么这样的链式结构是怎么实现的呢,下面我们利用代码来探讨一番:
先分解下,我们队$函数已经很熟悉了,他通常返回一个HTML元素或者HTML元素的集合,如下所示:
function $(){
var elements = [];
for(var i = 0, len = arguments.length; i < len; i++){
var element = els[i];
if(typeof element === 'string'){
element = document.getElementById(element);
}
elements.push(element);
}
return elements;
}
但是,如果把这个函数改造为一个构造器,把那些元素作为数组保存在一个实例属性中,并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用放方法的那个实例的引用,那么他就具有了进行链式调用的能力。
先别说的太远,我们首先需要把这个$函数改为一个工厂函数,他负责创建支持链式调用的对象。
(function(){
function _$(els){
this.element = [];
for(var i = 0, len = els.length; i < len; i++){
var element = els[i];
if(typeof element === 'string'){
element = document.getElementById(element);
}
this.element.push(element);
}
return this;
}
window.$ = function(){
return new _$(arguments);
}
})();
由于所有对象都会继承其原型对象的属性和方法,所以我们可以让定义原型对象中的那几个方法都返回用以调用方法的实例对象的引用,这样既可以对那些方法进行链式调用,想好这一点,我们现在就动手在_$这个私用构造函数的prototype对象那个中添加方法,以便实现链式调用。
(function(){
function _$(els){
this.element = [];
for(var i = 0, len = els.length; i < len; i++){
var element = els[i];
if(typeof element === 'string'){
element = document.getElementById(element);
}
this.element.push(element);
}
return this;
}
_$.prototype = {
each: function(fn){
for(var i = 0, len = this.element.length; i < len; i++){
fn.call(this, this.element[i]);
}
return this;
},
setStyle: function(prop, val){
this.each(function(el){
el.style[prop] = val;
});
return this;
},
show: function(){
var that = this;
this.each(function(el){
that.setStyle('display', 'none');
});
return this;
},
addEvent: function(type, fn){
var add = function(el){
if(window.addEventListener){
el.addEventListener(type, fn, false);
}else if(window.attachEvent){
el.attachEvent('on' + type, fn);
}
};
this.each(function(el){
add(el);
});
}
};
window.$ = function(){
return new _$(arguments);
}
})();
看看该类每个方法的最后一行,你会发现他们都是以"return this;"结束,这样将用以调用方法的对象传给调用链上的下一个方法。
分享到:
相关推荐
详解JavaScript中的链式调用 ...链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用。 this的作用域链,jQuery的实现方式,通常链式调用都是采用这种方式。 返回对象本身, 同t
Javascript链式调用 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
链式调用实现本身比较简单,也有很多文章详细阐述了其实现方式。本文更多从链式调用方法返回值的角度,更进一步来说明如何实现链式调用。 什么是链式调用 链式调用在 JavaScript 语言界很常见,如 jQuery 、 ...
本文实例讲述了JavaScript链式调用原理与实现方法。分享给大家供大家参考,具体如下: 1、什么是链式调用? 这个很容易理解,例如 $('text').setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:...
格式化-function与小括号间留空格。链式调用不换行 文章链接https://editor.csdn.net/md/?articleId=103597199
链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用。 this的作用域链,jQuery的实现方式,通常链式调用都是采用这种方式。 返回对象本身, 同this的区别就是显示返回链式对象。 ...
javascript 支持链式调用的异步调用框架Async.Operation.docx
主要介绍了JavaScript链式调用,结合实例形式分析了javascript链式调用的相关原理、实现方法及操作注意事项,需要的朋友可以参考下
主要介绍了javascript简单链式调用,结合具体实例形式模拟jQuery分析了链式调用的原理与具体实现技巧,需要的朋友可以参考下
javascript 支持链式调用的异步调用框架Async.Operation
一、方法体内返回对象实例自身(this) 代码如下: function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1;...
其实现机制就是链式调用。链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里。 没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提...
本文实例讲述了Javascript面向对象程序设计链式调用。分享给大家供大家参考,具体如下: 1.链式调用: jquery可能是目前大家最常用到的js框架了,也习惯了如下的调用方式: $('.someclass').show().css('xxx','xxxx'...
主要带领大家学习JavaScript设计模式,其中重点介绍链式调用,感兴趣的小伙伴们可以参考一下