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 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
js窗口震动小程序分享
Nov 28 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
微信小程序实现签到弹窗动画
Sep 21 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
php判断变量类型常用方法
2012/04/24 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vue 中directive功能的简单实现
2018/01/05 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
淘宝客服自我总结鉴定
2014/01/25 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
师范类求职信
2014/06/21 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
西安事变观后感
2015/06/12 职场文书
校运会通讯稿
2015/07/18 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
python如何为list实现find方法
2022/05/30 Python