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


Posted in Javascript onMay 16, 2020

本文实例讲述了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")
    })
  })
})()

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

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

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

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

Javascript 相关文章推荐
JavaScript Accessor实现说明
Dec 06 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
JS中的三个循环小结
Jun 20 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 #Javascript
JavaScript接口实现方法实例分析
May 16 #Javascript
JavaScript 类的封装操作示例详解
May 16 #Javascript
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
js抽奖转盘实现方法分析
May 16 #Javascript
JSONP 的原理、理解 与 实例分析
May 16 #Javascript
JavaScript随机数的组合问题案例分析
May 16 #Javascript
You might like
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
Java面试题及答案
2012/09/08 面试题
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
项目经理的岗位职责
2013/11/23 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
铣工实训报告
2014/11/05 职场文书
教师节慰问信
2015/02/15 职场文书
公司放假通知范文
2015/04/14 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
百家讲坛观后感
2015/06/12 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
python必学知识之文件操作(建议收藏)
2021/05/30 Python
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android