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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
js实现菜单跳转效果
Dec 11 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 Ajax乱码
2008/04/09 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
python如何求解两数的最大公约数
2018/09/27 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
Python: 传递列表副本方式
2019/12/19 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
python调用私有属性的方法总结
2020/07/24 Python
为什么要用EJB
2014/04/17 面试题
环境工程专业个人求职信
2013/12/05 职场文书
接受捐赠答谢词
2014/01/27 职场文书
师德师风个人反思
2014/04/28 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript