原文:http://dojotoolkit.org/documentation/tutorials/1.7/hitch/
原文作者:Tom Trenka
译者:Ruan Qi
Dojo 1.7 难度级别:中级
在dojo工具包中,dojo/_base/lang模块对Javascript原生方法进行了包装或增强,提供了不少相当有用的方法。本文将介绍Javascript中的函数对象(Function)的基础知识,以及如何使用dojo.hitch绑定函数的上下文,另外还将介绍如何使用dojo.partial为函数绑定特定参数等实用技术。
在讲解dojo.hitch和dojo.partial的用法之前,要先明白它们能解决什么问题。Javascript编程中最常听到的问题之一:this是什么?对面向对象编程来说,方法内部的this就是声明该方法的对象,非常简单!而对于Javascript,答案可不那么简单了。为求知其然并知其所以然,有必要了解Javascript中的函数上下文。
Javascript函数上下文
每当一个函数被调用时,Javascript会创建一个对应的上下文。上下文创建步骤如下:
- 创建argument对象;
- 创建函数的scope对象;
- 初始化函数的局部变量;
- 创建this属性;
其中this指向的是正在调用该函数的对象。理解这一点对于理解Javascript中的函数运行非常关键,因为Javascript中函数的上下文是在函数被调用的时候才确定的。
这里举一个例子:有一个object,这个object其中一个方法被当做多个HTML节点的点击事件的处理函数。下面是对应的代码。
var myObject = {
foo: "bar",
myHandler: function(evt){
// this is very contrived but will do.
alert("The value of 'foo' is " + this.foo);
}
};
// later on in the script:
dojo.query(".myNodes").forEach(function(node){
node.onclick = myObject.myHandler;
});
请看对应的Demo(
http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/demo.html)
当这些class为“myNodes”的button被点击时,你可能会认为浏览器会弹出“The value of 'foo' is bar”的消息,然而由于上面的myObject.myHandler绑定了节点的点击事件,导致浏览器弹出了“The value of 'foo' is undefined”。这是因为myObject.myHandler被作为节点的上下文执行,并非被myObject自己执行。换句话说,Javascript解释器认为当前的this指向了被点击的节点而非myObject。
使用apply、call指定函数运行上下文
Javascript为函数对象提供了apply与call方法,用于切换函数的运行时上下文。两种方法都可以通过传入运行时上下文,从而显式地指定this属性的引用。举例来说,我们希望上例中的节点被点击时,触发的myObject.myHandler的上下文为myObject。这里使用call方法为例:
dojo.query(".myNodes").forEach(function(node){
node.onclick = function(evt){
return myObject.myHandler.call(myObject, evt);
};
});
请看对应的Demo(http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/call.html)
理解了Javascript函数的上下文基础后,来看看dojo如何使用dojo.hitch来简化这一过程。
使用dojo.hitch绑定函数运行时上下文
Dojo.hitch是dojo提供的一个用来简化函数运行时上下文绑定的函数。简单来说dojo.hitch创建了一个绑定了上下文的新函数,用户可以不用担心心运行时的上下文变化会对函数产生影响。使用dojo.hitch也十分简单:
var foo = "bar"
var myFunction = function(){
return this.foo;
};
var myObject = { foo: "baz" };
// later on in your application
var boundFunction = dojo.hitch(myObject, myFunction);
// the first value will be "bar", the second will be "baz";
// the third will still be "bar".
myFunction(); // "bar"
boundFunction(); // "baz"
myFunction(); // "bar"
对应Demo(http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/hitch.html)
可以看到,无论外部运行时上下文如何变化,dojo.hitch保证函数myFunction的上下文对象始终是myObject。
arguments对象
还记得之前Javascript被调用时创建上下文的步骤吗?首先创建的就是arguments对象,arguments对象是一个函数的参数数组,以参数的传入顺序排列该数组内元素。
当函数定义完成后,其函数签名就被固定下来。我们就不能增加或者删除非匿名的函数参数。有时候这限制了函数调用的灵活性,我们不得不重写新的函数来应付参数列表的变更,而dojo.partial方法打破了这个限制。
使用dojo.partial控制参数列表
首先看下面的例子(取自dojo/data模块),参数列表中有4个参数:
var putValue = function(store, item, attr, value){
return store.setValue(item, attr, value);
}
然而后来在应用需要与putValue有相似的功能但参数列表不同的函数,如下所示:
//已声明的myStore对象
var myStore = new dojo.data.ItemWriteStore({…});
someObject.setValueHandler = function(item, attr, value){
myStore.setValue(item, attr, value);
};
dojo.partial是一个返回值为函数的函数,可以用预定义的值锁定函数的前几个参数。我们可以使用dojo.partial来避免someObject.setValueHandler的重复定义,代码如下:
var putValue = function(store, item, attr, value){
return store.setValue(item, attr, value);
}
...
var myStore = new dojo.data.ItemWriteStore({...});
//dojo.partial返回了首个参数为myStore的putValue函数
someObject.setValueHandler = dojo.partial(putValue, myStore);
//等同于运行putValue(myStore, someItem, “foo”, “bar”)
someObject.setValueHandler(someItem, "foo", "bar");
这里需要注意的是,dojo.partial并不锁定函数的运行时上下文。
同时绑定运行时上下文和锁定参数
如果我们希望同时绑定运行时上下文和锁定参数,dojo.hitch本身就可以完成这两个功能。dojo.hitch的头两个参数指的是要绑定的运行时上下文与对应函数,这两个参数后面可接上任意多个作为第二个参数代表的对应函数的锁定参数,代码如下:
someObject.setValueHandler = dojo.hitch(someObject, putValue, myStore);
// putValue的首个参数被锁定为myStore,并且putValue中的this参数(如果有的话)指向someObject
someObject.setValueHandler(someItem, "foo", "bar");
总结
在本教程中,首先阐述了Javascript运行时上下文的基础,然后介绍如何使用dojo.hitch方法固定函数的运行时上下文,又了解了使用固定值锁定参数列表的方法-dojo.partial,最后介绍了使用dojo.hitch同时实现这两个功能。
Dojo.hitch在事件驱动的编程模型中十分有效,用户无需关心函数运行时上下文的变更,降低代码的耦合性。
分享到:
相关推荐
小议JavaScript库——Dojo、jQuery和PrototypeJS的比较.pdf
dojo.js.核心jsDojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库
不错的学习资料,和大家分享。适合初学者。
JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools
该工具可按指定的方案合并、压缩dojo或符合dojo规范的js文件、压缩css文件。 使用方便,无需安装配置, 下载置入dojo源码下的任意目录即可一键完成...发布版: http://www.ecranesoft.com/aauto/dojo/dojoBuild-bin.rar
学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源...
DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与包) Dojo学习笔记-- djConfig解说 Dojo学习笔记-- dojo.dom ...
DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与包) Dojo学习笔记-- djConfig解说 Dojo学习笔记-- dojo.dom ...
1.1 Key Aspects of Dojo . 12 1.2 Using the Book . . . 15 1.3 Acknowledgments . . 17 I Ajax the Dojo Way 19 2 Powerful Web Forms Made Easy 20 2.1 What Customers Are Saying About Your Form 21 2.2 ...
DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与包) Dojo学习笔记-- djConfig解说 Dojo学习笔记-- dojo.dom ...
如何使用它下载特定版本的CometD Dojo绑定,浏览 在您选择的目录下的目录结构(已经有Dojo(和其他库))中解压缩CometD Dojo绑定,例如目录cometd-dojo/ : dojo/dijit/cometd-dojo/ cometd/ org/ cometd.js 现在,...
dojo JavaScript框架 Ajax学习
ArcGIS API for JavaScript 开发教程+DOJO指南+汉语配置教程,教程是针对arcgis js 3.x版本接口的,学习4.x接口的同学们不要下载
dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程
Include <SCRIPT TYPE="text/javascript" SRC="dojo/dojo.js"></SCRIPT> and you're on your way. Browse to dojo/tests/runTests.html or dijit/themes/themeTester.html to see Dojo in action
DOJO中文手册【出自dojo中国】 页数60+ 简单介绍: Dojo 是一个用javascript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets, Burstlib, f(m)), 这也是为什么叫它a \"unified\" toolkit的...
Dojo是一个用JavaScript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets, Burstlib, f(m)),这也是为什么叫它a unified toolkit的原因。Dojo的目标是解决开发DHTML应用程序遇到的那些、...
一、 Dojo学习笔记(1. 模块与包) 1 二、 Dojo学习笔记(2. djConfig解说) 4 三、 Dojo学习笔记(3. Dojo的基础对象和方法) 6 四、 Dojo学习笔记(4. dojo.string & dojo.lang) 9 五、 Dojo学习笔记(5. dojo.lang.array ...
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱,它为开发富客户端Ajax应用提供了一套完整的小部件和一些特效操作。曾经有人这样说:“对于一个Web开发者而言,如果没有Dojo,他将是一个“残废”的...