JavaSript设计模式之链式调用_Ubuntu_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • Ubuntu

    当前位置:主页 > 服务器教程 > Ubuntu >

    JavaSript设计模式之链式调用

    时间:2019-08-13|栏目:Ubuntu|点击:
  • 写过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 = _$;
    })();

    上一篇:Python logging 模块详述

    栏    目:Ubuntu

    下一篇:Linux kernel workqueue机制分析

    本文标题:JavaSript设计模式之链式调用

    本文地址:http://www.jh-floor.com/fuwuqijiaocheng/Ubuntu/20204.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号