JS设计模式中链式调用使用解析

来源：懂视网责编：小采时间：2020-11-27 19:49:05

JS设计模式中链式调用使用解析

JS设计模式中链式调用使用解析:这次给大家带来JS设计模式中链式调用使用解析，JS设计模式中链式调用使用的注意事项有哪些，下面就是实战案例，一起来看一下。写过jquery的可能都知道，jquery里面可以很方便的使用以下代码：// 不使用链式调用 const element = $(ele); elem

推荐度：

点击下载本文 文档为doc格式

导读JS设计模式中链式调用使用解析:这次给大家带来JS设计模式中链式调用使用解析，JS设计模式中链式调用使用的注意事项有哪些，下面就是实战案例，一起来看一下。写过jquery的可能都知道，jquery里面可以很方便的使用以下代码：// 不使用链式调用 const element = $(ele); elem

这次给大家带来JS设计模式中链式调用使用解析，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值，就可以让该类变化一个支持方法链式调用的类。而如果要让取值器方法也支持链式调用，就可以在取值器里使用回调的方式来解决这个问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

JS设计模式中链式调用使用解析

推荐度：

点击下载本文 文档为doc格式

标签：详解调用链式

热门焦点

JS设计模式中链式调用使用解析

JS设计模式中链式调用使用解析

JS设计模式中链式调用使用解析

最新推荐

猜你喜欢

热门推荐