Javasript设计模式之链式调用详解


Posted in Javascript onApril 26, 2018

本文实例为大家分享了js设计模式之链式调用的具体代码,供大家参考,具体内容如下

写过jquery的可能都知道,jquery里面可以很方便的使用以下代码:

// 不使用链式调用
const element = $(ele);
element.addClass('red');
element.removeClass('green');
element.show();

// 链式调用
$(ele)
 .addClass('red')
 .removeClass('green')
 .show();

而jquery这种调用方式就是链式调用。我们可以从上述代码看出来,如果不使用链式调用的话,那么我们会增加很多重复的代码,而且特别冗余。而通过链式调用,我们可以节省很多代码,并且代码看起来更加优雅和整洁。那么,接下来,我们来讨论下如何实现一个支持链式调用的库。

了解过原型链的人都知道,由构造函数生成的实例都可以访问其原型对象的属性和方法,因此,我们让定义在原型对象的方法最后都返回this(调用该方法的实例),就可以对原型方法进行链式调用。

// 通过立即执行函数,声明了一个_$函数,并且将一个$函数挂载到window上,并且每次调用$()的时候,返回的其实是个_$实例,由于原型对象方法里,执行最后都会返回一个this,因此就可以执行链式调用。
(function () {
 // 构造函数
 function _$(selector) {
  // ...
 }

 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  removeClass: function (className) {
   // ...
   return this;
  },
  show: function () {
   // ...
   return this;
  }
 };

 _$.prototype.constructor = _$;

 // 每次调用$()的时候,返回的其实是个_$实例
 window.$ = function () {
  return new _$(arguments);
 }
})();

// 通过这种方式,我们就可以直接使用$的链式调用
$(ele)
 .addClass('red')
 .removeClass('green')
 .show();

当然,上述代码其实可以进行优化一下,因为假设你引入的库里,已经有人定义了$函数,那么就会面临着命名冲突的问题。所以,我们可以为其增加一个安装器

(function () {
 // 构造函数
 function _$(selector) {
  // ...
 }

 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  removeClass: function (className) {
   // ...
   return this;
  },
  show: function () {
   // ...
   return this;
  }
 };

 _$.prototype.constructor = _$;

 // 增加一个安装器
 window.installHelper = function (scope, interface) {
  scope[interface] = function () {
   return new _$(arguments);
  }
 }
})();

// 而用户就可以这样使用它来自定义挂载对象以及其命名
installHelper(window, '$');

$(ele).show();

当然,有时候链式调用并不是一个好的主意。链式调用适用于赋值器方法,但是对于取值器方法的话,就不是很友好。因为我们有时候是想要方法返回一些数据,而不是返回一个this。对于这种情况的话,主要有两种解决方法,一种是对于取值器方法就不返回this,直接返回数据。而另一种方法呢,则是通过回调方法来处理数据:

// 第一种方法,当遇到取值器,则直接返回数据
(function () {
 // 构造函数
 function _$(selector) {
  this.ele = document.querySelector(selector);
  // ...
 }

 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  // 取值器
  getClass: function () {
   // ...
   return this.ele.className;
  }
 };

 _$.prototype.constructor = _$;
})();

// 第二种方式,通过回调的方式来处理数据
(function () {
 // 构造函数
 function _$(selector) {
  this.ele = document.querySelector(selector);
  // ...
 }

 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  getClass: function (cb) {
   // ...
   cb.call(this, this.ele.className);
   return this;
  }
 };

 _$.prototype.constructor = _$;
})();

通过链式调用,我们可以简化我们的代码,让代码更加简洁易读。而我们只需要让类所有的方法都返回this值,就可以让该类变化一个支持方法链式调用的类。而如果要让取值器方法也支持链式调用,就可以在取值器里使用回调的方式来解决这个问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
Jquery注册事件实现方法
May 18 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 #Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 #Javascript
jQuery length 和 size()区别总结
Apr 26 #jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 #Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 #Javascript
vue如何判断dom的class
Apr 26 #Javascript
vue 中filter的多种用法
Apr 26 #Javascript
You might like
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
python生成器与迭代器详解
2019/01/01 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
村官工作鉴定评语
2014/01/27 职场文书
网络技术专业求职信
2014/02/18 职场文书
班级德育工作实施方案
2014/02/21 职场文书
八项规定对照检查材料
2014/08/31 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
八项规定整改方案
2014/10/01 职场文书
自主招生自荐信范文
2015/03/04 职场文书
面试通知单大全
2015/04/20 职场文书