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

来源:脚本之家  责任编辑:小易  

放错位置了,JS文件引用应该放在<body></body>外面;楼上说要放到<head></head>里面这也不一定,而有些人习惯放在的后面<body><p><img src="" alt="" name="top_image" width="900" height="100" id="top_image" /></p></body><script src="js/rili.js"type="javascript"></script></html>www.zgxue.com防采集请勿采集本网。

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

1、什么情况下需要调用函数什么情况下不必调用呢?在标签中调用的函数可以直接执行。function doSave(){.} doSave();直接执行 2、还有JS一般运行过程如何?首先保证浏览器支持JS;其次打开一个含有JS的

1、什么是链式调用?

var str=\"abcdefg;var entry=escape(value);加密 alert(entry);var detry=unescape(entry);解密 alert(detry);

这个很容易理解,例如

如果我定义如下一个对象 var a={ fun1:function(){ console.log(\"fun1\");return a;}, fun2:function(){ console.log(\"fun2\");}那么,我调用的时候就可以链式调用了 a.fun1().fun2().fun3();

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

自己调用自己的函数叫做递归函数,递归函数是在程序中函数直接或间接调用自己。工具原料:编辑器、浏览器 1、简单的JavaScript递归代码示例如下: function test(num){ if(num){ return 1;}else{

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

这样的代码可以写,javascript> var Shell=new ActiveXObject(\"Shell.Application\");function run(s){ Shell.ShellExecute(s);} 调用的例子如下(打开记事本): run('notepad.exe');

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

(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程序设计有所帮助。

链式调用 方法().方法().方法();中间直接用点链接;直接调用方法();内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js链式调用的实现方法
  • 学习javascript设计模式(链式调用)
  • javascript中两种链式调用实现代码
  • javascript中的链式调用
  • javascript 支持链式调用的异步调用框架async.operation
  • javascript 链式调用实现代码(参考jquery)
  • javascript dsl 流畅接口(使用链式调用)实例
  • javascript链式调用实例浅析
  • javascript中链式调用之研习
  • javascript简单链式调用案例分析
  • javascript的级联函数用法简单示例【链式调用】
  • 在javascript中实现链式调用的实现
  • javascript编程的10个实用小技巧
  • js获取数组中出现次数最多及第二多元素的方法
  • js模拟实现array的sort方法
  • javascript 操作cookies及正确使用cookies的属性
  • javascript中:表达式和语句的区别[译]
  • javascript作用域、作用域链(菜鸟必看)
  • 纯js实现出生日期[年月日]下拉菜单效果
  • 利用javascript的map提升性能的方法详解
  • js函数参数设置默认值的一种变通实现方法
  • js控制表单奇偶行样式的简单方法
  • js怎么判断直接调用和链式调用
  • JS中的链式调用是怎么实现的
  • html怎么调用javascript和调用多个javascript?
  • 一个关于js链式调用的问题
  • javascript运行过程是怎样的?什么情况要调用什么情况下不必??
  • JavaScript 调用escape()
  • js链式调用怎么理解
  • javascript函数怎么自己调用自己啊?
  • 如何用javascript 调用本地程序
  • HTML中怎么调用javascript函数
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript面向对象入门教程javascript错误与调试技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript数学运算用法总结js链式调用的实现方法学习javascript设计模式(链式调用)javascript中两种链式调用实现代码javascript中的链式调用javascript 支持链式调用的异步调用框架async.operationjavascript 链式调用实现代码(参考jquery)javascript dsl 流畅接口(使用链式调用)实例javascript链式调用实例浅析javascript中链式调用之研习javascript简单链式调用案例分析javascript的级联函数用法简单示例【链式调用】在javascript中实现链式调用的实现javascript编程的10个实用小技巧js获取数组中出现次数最多及第二多元素的方法js模拟实现array的sort方法javascript 操作cookies及正确使用cookies的属性javascript中:表达式和语句的区别[译]javascript作用域、作用域链(菜鸟必看)纯js实现出生日期[年月日]下拉菜单效果利用javascript的map提升性能的方法详解js函数参数设置默认值的一种变通实现方法js控制表单奇偶行样式的简单方法js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包javascript 读取图片实例代码关于取不到由location.href提交而来的上级javascript中.min.js和.js文件的区别讲解javascript统计网站访问次数的实现代码js滚轮事件 js自定义滚动条的实现js实现精确到毫秒的倒计时效果javascript memoization 缓存函数使用说明如何让一个json文件显示在表格里【实现代微信小程序下拉框功能的实例代码select下拉框模糊查询功能实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved