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 = 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);
}
})();
//----------------------- 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;
};
this.getName = function(callback) {
callback.call(this, name);
return this;
};
};
//------------- test ---
var obj = new API();
obj.getName(console.log).setName('zhangsan').getName(console.log);
设计一个支持方法链式调用的JS库
JS库特征:
事件: 添加和删除事件监听器、对事件对象进行规划化处理
DOM: 类名管理、样式管理
Ajax: 对XMLHttpRequest进行规范化处理
Function.prototype.method = 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) {
//...
}).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)
}
}
})();
小结:
链式调用有助于简化代码的编写工作,并在某种程度上可以让代码更加简洁、易读。很多时候使用链式调用可以避免多次重复使用一个对象变量,从而减少代码量。如果想让类的接口保持一致,让赋值器和取值器都支持链式调用,那么你可以在取值器中使用回调函数来解决获取数据问题。
相关文章
JavaScript中使用Substring删除字符串最后一个字符
删除字符串最后一个字符的方法有很多,在本文将为大家介绍下js中的substring是如何做到的,需要的朋友可以参考下2013-11-11javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
这篇文章主要介绍了javaScript生成二维码,改造jquery.qrcode.js,使之支持中文,能带logo的二维码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-01-01javascript:;与javascript:void(0)使用介绍
有时候我们在编写js过程中,需要触发事件而不需要返回值,那么就可能需要这样的写法2013-06-06
最新评论