日期:2014-05-16 浏览次数:20382 次
废话不多说,代码摆出来,注释什么的都很清楚,如果看不很懂,请移步?javascript链式调用
?
//设计一个支持方法链式调用的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(); })(); */