//----------------------- 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)
}
}
})();
小结：