javascript链式调用的实现方式
2012-09-18 08:58 Barret李靖 阅读(1971) 评论(1) 编辑 收藏 举报本文从ITeye导入
在我们所用到的库中,可以看到很多诸如
$(window).addEvent('load', function(){ $('test').show().setStyle('color', 'red').addEvent('click', function(e){ $(this).setStyle('color', 'yellow'); }); });
的链式调用,那么这样的链式结构是怎么实现的呢,下面我们利用代码来探讨一番:
先分解下,我们队$函数已经很熟悉了,他通常返回一个HTML元素或者HTML元素的集合,如下所示:
function $(){ var elements = []; for(var i = 0, len = arguments.length; i < len; i++){ var element = els[i]; if(typeof element === 'string'){ element = document.getElementById(element); } elements.push(element); } return elements; }
但是,如果把这个函数改造为一个构造器,把那些元素作为数组保存在一个实例属性中,并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用放方法的那个实例的引用,那么他就具有了进行链式调用的能力。
先别说的太远,我们首先需要把这个$函数改为一个工厂函数,他负责创建支持链式调用的对象。
(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; } window.$ = function(){ return new _$(arguments); } })();
由于所有对象都会继承其原型对象的属性和方法,所以我们可以让定义原型对象中的那几个方法都返回用以调用方法的实例对象的引用,这样既可以对那些方法进行链式调用,想好这一点,我们现在就动手在_$这个私用构造函数的prototype对象那个中添加方法,以便实现链式调用。
(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; } _$.prototype = { each: function(fn){ for(var i = 0, len = this.element.length; i < len; i++){ fn.call(this, this.element[i]); } return this; }, setStyle: function(prop, val){ this.each(function(el){ el.style[prop] = val; }); return this; }, show: function(){ var that = this; this.each(function(el){ that.setStyle('display', 'none'); }); return this; }, 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); }); } }; window.$ = function(){ return new _$(arguments); } })();
看看该类每个方法的最后一行,你会发现他们都是以"return this;"结束,这样将用以调用方法的对象传给调用链上的下一个方法。

版权声明: 署名-非商业性使用-禁止演绎 3.0 国际(CC BY-NC-ND 3.0)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义