JavaScript链式调用原理与实现方法详解

更新时间：2020年05月16日 12:19:03 作者：WFaceBoss

这篇文章主要介绍了JavaScript链式调用,结合实例形式详细分析了JavaScript链式调用基本原理、实现方法与相关操作注意事项,需要的朋友可以参考下

本文实例讲述了JavaScript链式调用原理与实现方法。分享给大家供大家参考，具体如下：

1、什么是链式调用？

这个很容易理解，例如

$('text').setStyle('color', 'red').show();

一般的函数调用和链式调用的区别：链式调用完方法后，return this返回当前调用方法的对象。

首先，我们先来看看一般函数的调用方式

（1）先创建一个简单的类

//创建一个bird类
  function Bird(name) {
    this.name=name;
    this.run=function () {
    document.write(name+" "+"start run;");
        }
    this.stopRun=function () {
     document.write(name+" "+"start run;");
        }
    this.sing=function () {
      document.write(name+" "+"start sing;");
    }
    this.stopSing=function () {
      document.write(name+" "+"start stopSing;");
    }
  }

（2）使用方式：一般的调用方式

 var bird=new Bird("测试");
  bird.run();
  birdbird.sing();
  bird.stopSing();
  bird.stopRun();

//结果为;测试 start run;测试 start sing;测试 start stopSing;测试 start run;

（3）总结，该种方式有一个弊端就是：多次重复使用一个对象变量

然后，我们再来看看将上述改成链式调用的格式

（1）在创建的简单类中加上return this，如下

//创建一个bird类
  function Bird(name) {
    this.name=name;
    this.run=function () {
      document.write(name+" "+"start run;");
      return this;// return this返回当前调用方法的对象。
    }
    this.stopRun=function () {
      document.write(name+" "+"start run;");
      return this;
    }
    this.sing=function () {
      document.write(name+" "+"start sing;");
      return this;
    }
    this.stopSing=function () {
      document.write(name+" "+"start stopSing;");
      return this;
    }
  }

（2）使用链式调用（连缀的方式）

var bird=new Bird("测试");
  bird.run().sing().stopSing().stopRun();//结果为;测试 start run;测试 start sing;测试 start stopSing;测试 start run;

（3）总结此种方式的调用结果与一般的调用方式产生的结果一样，优点是：链式调用这种风格有助于简化代码的编写工作，让代码更加简洁、易读，同时也避免多次重复使用一个对象变量

2.模仿jquery的链式调用

第一步，定义一个含参数的空对象

(function(){
 //下划线：表示私有变量的写法
  function _$(els) { };//有参数的空对象
})()//程序启动的时候 里面的代码直接执行了

第二步，准备方法在_$上定义一个onrReady方法

(function(){

  //第一步，下划线：表示私有变量的写法
  function _$(els) { };//有参数的空对象

  //第二步，准备方法 在_$上定义一个onrReady方法
  _$.onrReady=function (fn) {
    //按要求把对象（_$）注册到window对象上
    //对外开放的接口
    window.$=function () {
      return new _$(arguments);//传递相应的方法调用参数 返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
    }
    fn();
  }
  }
})()

第三步，为了类（Function）能扩展函数，我们定义一个它的静态函数

Function.prototype.method=function (name,fn) {//（函数名称，函数本身）
   this.prototype[name]=fn;
   return this;//链式调用关键
};//这个函数的意思：为function对象增加函数，会用链式调用，链式调用有两个参数name,和fn

第四步，扩展类的相应方法链式的对象增加jquery库提供的操作函数

(function(){
  //下划线：表示私有变量的写法
  function _$(els) { };//有参数的空对象
  //第二步，准备方法 在_$上定义一个onrReady方法
  _$.onrReady=function (fn) {
    //按要求把对象（_$）注册到window对象上  
    //对外开放的接口
    window.$=function () {
      return new _$(arguments);//传递相应的方法调用参数 返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
    }
    fn();
  }
   //第四步
  //扩展类的相应方法 链式的对象增加jquery库提供的操作函数 
_$.method("AddEvent",function (type,fn) {//_$本身是一个function要继承原型链上的东西。
  fn();
}).method("getEvent",function (fn,e) {
  fn();
})

})()

第五步，使用，需要调用_$.onReady方法才可以返回对象使用从function类继承而来的原型上的方法

(function () {
  // （1）下划线：表示私有变量的写法
  function _$(els) { };//有参数的空对象
  //（2）准备方法 在_$上定义一个onrReady方法
   // window.$=_$;
  _$.onrReady=function (fn) {
    //按要求把对象（_$）注册到window对象上  在任何地方都可以使用
    //对外开放的接口
    window.$=function () {//window 上先注册一个全局变量 与外界产生关系
      return new _$(arguments);//传递相应的方法调用参数 返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
    }
    fn();
  }
  //（4）扩展类的相应方法 链式的对象增加jquery库提供的操作函数
_$.method("AddEvent",function (type,fn) {//_$本身是一个function要继承原型链上的东西。
  fn();
}).method("getEvent",function (fn,e) {
  fn();
});
  //第五步，开始使用 ，需要调用_$.onready方法才可以返回对象使用从function类继承而来的原型上的方法
   _$.onrReady(function () {//$是绑定在Windows上的
    $("").AddEvent("click",function () {
      alert("click")
    })
  })

})()

上述综合的代码为

//第三步，为了类（Function）能扩展函数，我们定义一个它的静态函数
Function.prototype.method=function (name,fn) {//（函数名称，函数本身）
   this.prototype[name]=fn;
   return this;//链式调用关键
};//这个函数的意思：为function对象增加函数，会用链式调用，链式调用有两个参数name,和fn

(function () {
  // 第一步，下划线：表示私有变量的写法
  function _$(els) { };//有参数的空对象
  //第二步，准备方法 在_$上定义一个onrReady方法
   // window.$=_$;
  _$.onrReady=function (fn) {
    //按要求把对象（_$）注册到window对象上 
    //对外开放的接口
    window.$=function () {
      return new _$(arguments);//传递相应的方法调用参数 返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
    }
    fn();
  }
  //第四步，扩展类的相应方法 链式的对象增加jquery库提供的操作函数
_$.method("AddEvent",function (type,fn) {//_$本身是一个function要继承原型链上的东西，所以可以使用method方法
  fn();
}).method("getEvent",function (fn,e) {
  fn();
});
  //第五步，开始使用，需要调用_$.onready方法才可以返回对象使用从function类继承而来的原型上的方法
   _$.onrReady(function () {//$是绑定在Windows上的
    $("").AddEvent("click",function () {
      alert("click")
    })
  })
})()

上述是将$绑定到window上的操作，如果我们想将$绑定到一个指定对象上我们可以这通过改变上述的第二步和第五步如下，

/**
 * Created by 与你在巅峰相会 on 2017/10/12.
 */

//第三步，为了类（Function）能扩展函数，我们定义一个它的静态函数
Function.prototype.method=function (name,fn) {//（函数名称，函数本身）
   this.prototype[name]=fn;
   return this;//链式调用关键
};//这个函数的意思：为function对象增加函数，会用链式调用，链式调用有两个参数name,和fn

(function () {
  // 第一步，下划线：表示私有变量的写法
  function _$(els) { };//有参数的空对象
  //第二步，准备方法 在_$上定义一个onrReady方法
  _$.onReady=function (obj,fn) {//obj传进来的对象
    if(obj){
      //按要求把对象（_$）注册到window对象上 
      //对外开放的接口
      obj.$=function () {
        return new _$(arguments);//传递相应的方法调用参数 返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
      }
    }else {
      //按要求把对象（_$）注册到window对象上  
      //对外开放的接口
      window.$=function () {
        return new _$(arguments);//传递相应的方法调用参数 返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
      }
    }
    fn();
  }
  //第四步，扩展类的相应方法 链式的对象增加jquery库提供的操作函数
_$.method("AddEvent",function (type,fn) {//_$本身是一个function要继承原型链上的东西，可以直接使用method方法
  fn();
}).method("getEvent",function (fn,e) {
  fn();
});
  //第五步，开始使用，需要调用_$.onready方法才可以返回对象使用从function类继承而来的原型上的方法
   var com={};
  _$.onReady(com,function () {//$是绑定在Windows上的
    com.$("").AddEvent("click",function () {
      alert("click")
    })
  })
})()

自己画一个图简单理解一下上面的过程及思路：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

webpack4 升级迁移的实现
这篇文章主要介绍了webpack 4 升级迁移的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
javascript组合使用构造函数模式和原型模式实例
这篇文章主要介绍了javascript组合使用构造函数模式和原型模式的方法,通过一个简单实例分析了javascript构造函数模式与原型模式的使用方法,需要的朋友可以参考下
2015-06-06
javascript实现客户端兼容各浏览器创建csv并下载的方法
这篇文章主要介绍了javascript实现客户端兼容各浏览器创建csv并下载的方法,实例分析了javascript操作csv文件的技巧,需要的朋友可以参考下
2015-03-03
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
这篇文章主要介绍了JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件的相关资料,需要的朋友可以参考下
2015-12-12
使用javascript为网页增加夜间模式
如何给Web页面增加夜间模式功能? 其实所谓的夜间模式就是在页面上增加一个透明的遮罩层，但是遮罩层会挡住页面元素，解决方法是添加DIV，给DIV的outline属性一个很大的outline-width值，用outline的边框作为遮罩，这样既能正常点击页面元素，又能达到夜间模式的效果
2014-01-01
基于bootstrap页面渲染的问题解决方法
今天小编就为大家分享一篇基于bootstrap页面渲染的问题解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
JavaScript中好用的解构用法详解
这篇文章主要为大家介绍了JavaScript中好用的解构用法操作示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Java File类的常用方法总结
这篇文章主要介绍了Java File类的常用方法总结,本文讲解了File类的常用方法,并对一些方法给出了代码示例,需要的朋友可以参考下
2015-03-03
js继承的6种方式详解
这篇文章主要给大家介绍了关于js继承的6种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
Javascript 是你的高阶函数(高级应用)
这篇文章主要介绍了Javascript 是你的高阶函数 ,需要的朋友可以参考下
2015-06-06

JavaScript链式调用原理与实现方法详解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具