方法的链式调用：
(function() {
//私有类
function _$ (els) {
this.elements = [];
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);
}
}
_$.prototype = {
each: function(fn) {
for (var i=0, len=this.elements.length; i<len.length; ++i) {
fn.call(this, this.elements[i]);
};
return this;
},
setStyle: function(prop, val) {
this.each(function(el){
el.style[prop] = val;//el即dom元素，给每个元素设置样式
});
return this;
},
show: function() {
var that = this;
this.each(function() {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var add = function(el) {
if(widow.addEventListener){
el.addEventListener(type, fn, false)
}
else if(widow.attachEvent){
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
add(el);
});
return this;
}
}
window.$ = function() {
return new _$(arguments);
};
})();
看看该类的每一个方法的最后一行，你会发现他们都以“returen this”结束。这将会用以调用方法的对象传个调用链上的下一个方法。支持链式调用的接口带来的可能性是无穷的。现在你可以这样编写代码：
$(widow).addEvent('load', function() {
$('test-1','test-2').show().
setStyle('color', 'red').
addEvent('click', function() {
$(this).setStyle('color', 'green');
});
}
这会把一个时事件监听器关联到window对象的load事件。它执行的时候回立即显示ID值为test-1和test-2的两个元素并将其中的文字设置为红色，随后，它会为这两个元素添加click事件监听器，其作用是在他们被点击时将文字设置为绿色。