Javascript面向对象之四链式调用-《javascript设计模式》笔记
1.链式调用: (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); } })();
jquery可能是目前大家最常用到的js框架了,也习惯了如下的调用方式:
$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……
这种调用方式就叫做链式调用,也就是说在调用一个方法之后,可以使用方法的返回值来继续进行方法调用。
2.如何实现链式调用:
了解了什么是链式调用,我们再来看如何实现链式调用,从1中所述我们应该知道链式调用的关键在于方法的返回值,只要方法的返回值都是调用该方法的对象,那么,我们就可以实现链式调用了,我们仿照jquery,使用$作为对象的选择器:
推荐阅读
-
前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
-
前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战
-
前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
-
Javascript面向对象之十装饰者模式-《javascript设计模式》笔记
-
Javascript面向对象之一对象成员的定义-《javascript设计模式》笔记
-
Javascript面向对象之七组合模式-《javascript设计模式》笔记
-
Javascript面向对象之十装饰者模式-《javascript设计模式》笔记
-
Javascript面向对象之一对象成员的定义-《javascript设计模式》笔记
-
Javascript面向对象之三单例模式-《javascript设计模式》笔记
-
Javascript面向对象之九适配器模式-《javascript设计模式》笔记