本文实例为大家分享了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值,就可以让该类变化一个支持方法链式调用的类。而如果要让取值器方法也支持链式调用,就可以在取值器里使用回调的方式来解决这个问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 陈慧娴.1996-雪映美白96演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 王子异《1996 Part.2》[FLAC/分轨][50.66MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[320K/MP3][155.91MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[FLAC/分轨][251.78MB]
- 黄韵玲2001-巴结音乐[全员集合][WAV+CUE]
- 郑绪岚2015-流金岁月·精选[首版][WAV+CUE]
- 周冰倩1995《沧桑情歌》JVC日本录制[WAV+CUE]
- 辛禄乐队.2024-热烈的少年【星辰】【FLAC分轨】
- 成龙.1996-龙的心【滚石】【WAV+CUE】
- 童安格.1991-一世情缘【宝丽金】【WAV+CUE】
- 韩红2010-擦肩而过[央金玛][WAV+CUE]
- RiccardoTesi-UnballoLiscio,Vol.II(2024)[24-48]FLAC
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]