JS⽅法链式调⽤的实现
写在前⾯的话：
程序开发⼈员可以使⽤⼀些简单的技术来改进⾃⼰的代码编写⼯作。你可以写⼀些函数来处理各种常见任务，以节省时间；也可以改进⼀下代码的实现⽅式，⽐如你可以把⽅法的链式调⽤技术⽤到⾃⼰所写的JS库中，把⾃⼰喜欢的⽅法串起来调⽤。
链式调⽤
链式调⽤其实只不过是⼀种语法招数。它能让你通过重⽤⼀个初始操作来达到⽤少量代码表达复杂操作的⽬的。该技术包括两个部分：
⼀个创建代表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 = ElementById(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);
}
})();
//----------------------- test --------
$(window).addEvent('load', function() {
$('test-1', 'test-2').show()
.setStyle('color', 'red')
.addEvent('click', function() {
$(this).setStyle('color', 'green');
});
})
链式调⽤的⽅法获取数据
使⽤回调函数从⽀持链式调⽤的⽅法获取数据。链式调⽤很适合赋值器⽅法，但对于取值器⽅法，你可能希望他们返回你要的数据⽽不是this(调⽤该⽅法的对象).解决⽅案：利⽤回调技术返回所要的数据.
window.API = window.API || function() {
var name = 'mackxu';
//特权⽅法
this.setName = function(name0) {
name = name0;
return this;
};
callback.call(this, name);
return this;
};
};
//------------- test ---
var obj = new API();
设计⼀个⽀持⽅法链式调⽤的JS库
JS库特征：
事件：添加和删除事件、对事件对象进⾏规划化处理
DOM：类名管理、样式管理
Ajax：对XMLHttpRequest进⾏规范化处理
hod = function(name, fn) {
this.prototype[name] = fn;
return this;
};
(function() {
function _$(els) {
//...
}
/*
* Events
*      addEvent
*      removeEvent
*/
_$.method('addEvent', function(type, fn) {
//...
}).method('removeEvent', function(type, fn) {
})
/*
* DOM
*      addClass
*      removeClass
*      hover
*      hasClass
*      getClass
*      getStyle
*      setStyle
*/
.method('addClass', function(classname) {
//...
}).method('removeClass', function(classname) {
//...
}).method('hover', function(newclass, oldclass) {
//...
}).method('hasClass', function(classname) {
//...
}).method('getClass', function(classname) {
//...
}).method('getStyle', function(prop) {
js调用方法的三种写法//...
}).method('setStyle', function(prop, val) {
//...
})
/*
* AJAX
*      ajax
*/
.method('ajax', function(url, method) {
//...
});
window.$ = function() {
return new _$(arguments);
};
//解决JS库命名冲突问题
window.installHelper = function(scope, interface) {
scope[interface] = function() {
return _$(arguments)
}
}
})();
⼩结：
链式调⽤有助于简化代码的编写⼯作，并在某种程度上可以让代码更加简洁、易读。很多时候使⽤链式调⽤可以避免多次重复使⽤⼀个对象变量，从⽽减少代码量。如果想让类的接⼝保持⼀致，让赋值器和取值器都⽀持链式调⽤，那么你可以在取值器中使⽤回调函数来解决获取数据问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。