《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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
vue组件实现进度条效果
Jun 06 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
python分割文件的常用方法
2014/11/01 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python简单的三元一次方程求解实例
2020/04/02 Python
如何学习Python time模块
2020/06/03 Python
Python colormap库的安装和使用详情
2020/10/06 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
模具毕业生推荐信
2014/02/15 职场文书
作文评语集锦大全
2014/04/23 职场文书
融资租赁计划书
2014/04/29 职场文书
大三学习计划书范文
2014/05/02 职场文书
就业协议书样本
2014/08/20 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
幼儿园教师自荐书
2015/03/06 职场文书