//设计一个支持方法链式调用的JavaScript库
/* 常见于大多数JavaScript库中的特性 ———————————————————————————————————————————————————————————————————— 特性 | 说明 ———————————————————————————————————————————————————————————————————— 事件 | 添加和删除事件监听器,对时间对象进行规范内化处理 DOM | 类名管理,样式管理 Ajax | 多XMLHttpRequest进行规范化处理 ————————————————————————————————————————————————————————————————————
注:可以对私有的_$构造函数进行扩充 */ Function.prototype.method = function(name, fn){ this.prototype[name] = fn; return this; };
(function(){
function _$(els){ this.element = []; for(var i = 0, len = els.length; i < len; i++){ var element = els[i]; if(typeof element === 'string'){ element = document.getElementById(element); } this.element.push(element); } return this; }
/* Events * addEvent */
_$.method('addEvent', function(type, fn){ var add = function(el){ if(window.addEventListener){ el.addEventListener(type, fn, false); }else if(window.attachEvent){ el.attachEvent('on' + type, fn); } this.each(function(el){ add(el); }); }).
/* otherFun * each * setStyle * show */
method('otherFun', function(fn){ for(var i = 0, len = this.element.length; i < len; i++){ fn.call(this, this.element[i]); } return this; }). method('setStyle', function(prop, val){ this.each(function(el){ el.style[prop] = val; }); return this; }). method('show', function(){ var that = this; this.each(function(el){ that.setStyle('display', 'none'); }); return this; });
window.installHelper = function(scope, interface){ scope[interface] = function(){ return new _$(arguments); }; }; })();
/* //处理库中$的冲突问题
用户可能会这样使用: installHelper(window, "$");
$('example').show();
也可以将功能添加到实现定义好的命名空间对象中: window.com = window.com || {}; com.example = com.example || {}; com.example.util = com.example.util || {};
installHelper(com.example.util, '$'); (function(){ var get = com.example.util.get; get('example').show(); })(); */
|