链式调用
链式调用其实只不过是一种语法招数。它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。该技术包括两个部分：
一个创建代表HTML元素的对象的工厂。
一批对这个HTML元素执行某些操作的方法。
调用链的结构
$函数负责创建支持链式调用的对象
复制代码 代码如下:
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
this.elements = []; //存放HTML元素
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);
}
}
//对HTML元素可执行的操作
_$.prototype = {
each: function() {},
setStyle: function() {},
show: function() {},
addEvent: function() {},
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
};
})();
由于所有对象都会继承其原型对象的属性和方法，所以我们可以让定义在原型对象中的那些方法都返回用以调用方法的实例对象的引用，这样就可以对那些方法进行链式调用了。
复制代码 代码如下:
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
//...
}
//对HTML元素可执行的操作
_$.prototype = {
each: function(fn) { //fn 回调函数
for(var i=0; i<this.elements.length; i++) {
//执行len次，每次把一个元素elements[i]作为参数传递过去
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, value) {
this.each(function(el) {
el.style[prop] = value;
});
return this;
},
show: function() {
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var addHandle = function(el) {
if(document.addEventListener) {
el.addEventListener(type, fn, false);
}else if(document.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
addHandle(el);
});
return this;
}
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
}
})();