如何设计一个支持方法链式调用的JavaScript库
2012-09-18 09:37 Barret李靖 阅读(391) 评论(0) 编辑 收藏 举报本文从ITeye导入
可以先了解下 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(); })(); */
![](https://images.cnblogs.com/cnblogs_com/hustskyking/464294/o_follow.jpg)
版权声明: 署名-非商业性使用-禁止演绎 3.0 国际(CC BY-NC-ND 3.0)