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


Posted in Javascript onApril 07, 2020

本文实例讲述了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);

}

})();

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

Javascript 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
JS模板实现方法
Apr 03 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 #Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 #Javascript
flexible.js实现移动端rem适配方案
Apr 07 #Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 #Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 #Javascript
小谈angular ng deploy的实现
Apr 07 #Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 #Javascript
You might like
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python中正则表达式与模式匹配
2019/05/07 Python
用python做游戏的细节详解
2019/06/25 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python生成器推导式用法简单示例
2019/10/08 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Pandas之缺失数据的实现
2021/01/06 Python
2015年师德师风承诺书
2015/01/22 职场文书
高考1977观后感
2015/06/04 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书