《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 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
Javascript之Date对象详解
Jun 07 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP多进程编程实例
2014/10/15 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python 字符串换行的多种方式
2018/09/06 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
索尼巴西商店:Sony巴西
2019/06/21 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
金融管理专业求职信
2014/07/10 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
vue实力踩坑之push当前页无效
2022/04/10 Vue.js