《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析

时间:2021-05-28

本文实例讲述了Javascript面向对象程序设计链式调用。分享给大家供大家参考,具体如下:

1.链式调用:

jquery可能是目前大家最常用到的js框架了,也习惯了如下的调用方式:

$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……

这种调用方式就叫做链式调用,也就是说在调用一个方法之后,可以使用方法的返回值来继续进行方法调用。

2.如何实现链式调用:

了解了什么是链式调用,我们再来看如何实现链式调用,从1中所述我们应该知道链式调用的关键在于方法的返回值,只要方法的返回值都是调用该方法的对象,那么,我们就可以实现链式调用了,我们仿照jquery,使用$作为对象的选择器:

(function(){ function _$(els){this.elements = [];for(var i=0, len=els.length;i<len;i++){ var elements = els[i]; if(typeof element = ‘string'){ element = document.getElementByIdx_x_x(element);}}this.elements.push(element);}_$.prototype = { each:function(fn){ for(var i=0,len=this.elements.length;i<len;i++){ fn.call(this, this.elements[i]);}return this;},setStyle: function(prop, val){……},show:function(){……},……}window.$ = function(){ return new _$(arguments);}})();

上面的代码就实现了一个简单的链式调用对象,并且使用一个_$作为$的别名,以防止$被其他代码改写而导致整个对象的定义丢失。

附:一个简单链式调用示例:

var arr = [1,2,3];var num = arr.map(function(items){ return items + 1;});console.log(num);//[2,3,4 var arr = [1,2,3]; var num = arr.map(function (items) { return items+1; }).reduce(function (a,b) {//[2,3,4].reduce() return a+b; })​ console.log(num);//0 --- 2+3+4 = 9]​var arr = [1,2,3];var num_1 = arr.reduce(function (a,b) { return a+b;})console.log(num_1);//6​var arr = [1,2,3];var num = arr.map(function (items) { return items+1;}).reduce(function (a,b) {//[2,3,4].reduce() return a+b;})​console.log(num);//0 --- 2+3+4 = 9

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章