Dojo 学习笔记 之 Dojo hitch&partial
原文: http://dojotoolkit.org/documentation/tutorials/1.10/hitch/index.html
版本: Dojo 1.10
为了更好地使用JavaScript原生函数,dojo/_base/lang模块提供了很多非常有用的方法。这里,我们来学习JavaScript函数(Function)对象基础,及如何使用lang.hitch来绑定函数的上下文。在此基础上,学习如何使用lang.partial来绑定函数的特定参数,及如何使用lang.hitch实现这两个操作。
在开始学习之前,你需要对Dojo Toolkit基础知识有一定的了解,如dojo/query, Dojo's Array helpers等。
在理解如何及何时使用lang.hitch和lang.partial之前,我们需要知道它们解决了什么问题。JavaScript中最容易被误解的一个概念是:this是什么?通常,在面向对象编程中,当一个对象的方法被调用时,this就指向这个对象。然而在JavaScript中并不是这样,为了更好的理解它,我们要先理解执行上下文(execution context)概念。
JavaScript中的执行上下文
在JavaScript中,无论何时调用一个函数,就会创建它的执行上下文。这个上下文的创建步骤是:
1)创建arguments对象;
2)创建函数的scrope对象;
3)初始化函数的变量;
4)创建this属性。
这里的this属性是开发者最容易迷惑的地方,它就是调用该函数的上下文或scope的对象一个引用。理解这一点是理解JavaScript如何工作的关键,因为JavaScript中,一个函数执行的真正上下文是在函数被调用时才能决定的。
下面是一个例子: 假如我们有一个对象,对象中的一个方法将被用作文档中的某些节点的事件处理函数。
// Require the query resource, and wait until the DOM is ready
require(['dojo/query', 'dojo/domReady!'], function(query) {
var myObject = {
foo: "bar",
myHandler: function(e) {
// This is very contrived but will do.
alert("The value of 'foo' is " + this.foo);
}
}; // later on in the script:
query('.myNodes').forEach(function(node) {
node.onclick = myObject.myHandler;
});
});
当点击了具有‘myNodes’类的任何一个DOM节点时,你可能会认为上面的函数定义会弹出一个JavaScript警示框提示“The value of 'foo' is bar”,然而,由于我们设定myObject.myHandler为节点点击的事件处理器,我们将会得到“The value of 'foo' is undefined”提示信息。看看原因:
node.onclick = myObject.myHandler; 这个表达式myObject.myHandler调用了myHandler函数,事实上,myHandler函数是在myObject对象中定义这一事实已经被忽视了,现在node.onclick是myHandler函数的引用,注意这里只是myHandler这个函数,而并不是myObject的上下文。DOM事件处理器运行的上下文是触发这个事件的节点,也就是说,不考虑它是在哪及如何定义的,这个函数如同是该节点的一个方法一样被执行,结果就是在执行时myHandler函数内部的this值是当前触发事件的节点。
注意:如果觉得这很迷惑,牢记一点:根本原因是因为如同其它非基本类型,Function对象是引用传递,而不是值传递。
用.apply和.call方法改变执行上下文
由于JavaScript函数执行上下文是在函数被调用时决定的,它提供了一种在执行时通过Function.apply和Function.call来改变上下文(即this)的方法。很简单,两个方法均允许传递一个对象作为执行函数的上下文。例如,如果你想保证上面例子的handler是在myObject上下文中执行的,可以使用Function.call方法来包装我们的引用,如下:
query('.myNodes').forEach(function(node) {
node.onclick = function(e) {
myObject.myHandler.call(myObject, e);
}
});
在大多数情况下,会使用Function.apply方法,并从外部函数传递arguments对象。然而,当一个函数的参数已知时,推荐使用call方法,因为当JavaScript解释器不需要直接访问arguments对象时,会获得稍微高的性能。
用lang.hitch绑定执行上下文
Dojo Toolkit提供了一种简便的方法lang.hitch来绑定函数的上下文,简单来说,lang,hitch创建了一个Function对象,绑定给了一个特定的上下文,这样就可以实现安全地调用函数,而不需要担心函数上下文的变化。下面是一个例子:
// `foo` is intentionally global
var foo = "bar";
require(['dojo/_base/lang'], function(lang) {
var myFunction = function() {
return this.foo;
};
var myObject = {foo: 'baz'}; // later on in your application
var boundFunction = lang.hitch(myObject, myFunction); // test
myFunction(); // "bar"
boundFunction(); // "baz"
myFunction(); // "bar"
});
lang.hitch确保了一个特定函数,绑定了一个特定执行上下文,调用时不再需要考虑执行时上下文的变化。
arguments对象
arguments对象是一个类数组对象,保存了传递给当前函数的参数列表。另外,在创建上下文时,该对象的任何命名变量已被创建,因此,这些值可以在函数内部使用,如同当前函数自身的变量一样。记住,arguments对象并不是一个真正的Array对象,尽管它与Array对象有许多相似的地方,但它是只读的,也就意味着Array对象的其他一些方法不能对arguments对象使用(如Array.prototype.slice等)。
当定义了一个函数时,函数的签名就固定下来了,不能通过除非重新定义该函数的其他任何方法增加或删除命名参数。这样也就带来了一个问题,尤其是当你需要使用一个函数签名,而不去真正复制或重写原始函数,Dojo Toolkit提供了一个简单的方法来实现这个功能——lang.partial方法。
用lang.partial改变函数的参数列表
经常会遇到的一个问题是,一个函数定义了多个参数,但是有时我们只需要部分参数。例如,假如我们有一个函数有4个参数(取自dojo/data):
var putValue = function(store, item, attr, value) {
return store.setValue(item, attr, value);
}
但是,可能在项目的其它地方有一个类似的定义,只有3个参数:
someObject.setValueHandler = function(item, attr, value) {
// placeholder function to be overriden
};
用lang.partial,你可以创建一个新的预先设置好参数值的函数,在上面的例子中,可以通过预先设定好store的值,然后将someObject.setValueHandler设置为部分函数的引用,如下:
// assuming we have a dojo/data store called "myStore" // our function
var putValue = function(store, item, attr, value) {
return store.setValue(item, attr, value);
} // ...
// their function signature
someObject.setValueHandler = function(item, attr, value) {
// placeholder function to be overriden
}; // ...
// our solution using lang.partial
someObject.setValueHandler = lang.partial(putValue, myStore); // ...
// somewhere in the application when setValueHandler is invoked,
// our putValue function will already have the "store" arg
// set to a reference to "myStore"
someObject.setValueHandler(someItem, "foo", "bar");
对上面的解释:
1. 首先定义了一个具有4个参数的函数;
2. 发现setValueHandler函数只需要3个参数,并且我们不可以修改;
3. 我们在putValue基础上创建了一个新的函数,并且putValue的第一个参数store的值被初始设定为myStore;
4. 新的部分函数被调用时只传递了3个参数,但是此时部分函数的第一个参数的值已经被设定为myStore.
需要注意的是,不像lang.hitch方法,lang.partial并不会预先设定返回部分函数的执行上下文,换句话说,根据你使用新部分函数的不同,this的值可能有变化。
在使用lang.partial时,将函数的一个参数代表执行上下文,你可以通过设定一个对象的引用作为对象的执行上下文,从而可以同时获得二者的优势。
结合hitch和partial的优势
如果你想同时具有hitch和partial的优势,lang.hitch可以同时具有二者,你可以在上下文和方法名后添加任意多个值,lang.hitch会用预定的上下文和预先设定的参数值来创建新的函数。如下:
someObject.setValueHandler = lang.hitch(someObject, putValue, myStore); // ...
// later on in the application, the setHandler is invoked
// again -- this time in the context of someObject
someObject.setValueHandler(someItem, 'foo', 'bar');
hitch和partial是了解函数式编程的基础,Dojo Toolkit中通过dojox/lang/functional命名空间提供了很多函数式编程技巧,推荐看一看。
总结
这里我们回顾了JavaScript Function对象——包括函数的调用过程。然后引入了lang.hitch,允许你去绑定一个函数的执行上下文,在些基础上,我了学习了如何使用lang.partial预设一个函数的参数值,最后介绍了如何使用lang.hitch同时绑定上下文和参数值。
由于lang.hitch允许预先绑定函数执行上下文,因此它在事件驱动的编程技术(或者基于回调的编程)中非常有用。
Dojo 学习笔记 之 Dojo hitch&partial的更多相关文章
- dojo 学习笔记之dojo.query - query(id) 与query(class)的差别
考虑这个样例:动态创建一个页面的时候,用new listtem()生成多个listitem, 且每一个listitem中都生成一个按钮button. 假设想要给每一个按钮都绑定一个click事件,用d ...
- dojo 学习笔记
1 因为Dijit包括了一系列的UI组件,他绑定了4个支持的主题:nihilo, soria, tundra 和claro.每个主题包括了一系列的图片和CSS文件来控制组件的外观.CSS文件必须显示 ...
- Elasticsearch学习笔记(九)partial update
一.什么是partial update? PUT /index/type/id,创建文档&替换文档,就是一样的语法 一般对应到应用程序中,每次的执行流程基本是这样的: (1)应用程序先发起一个 ...
- dojo学习教程
Dojo 作为最著名的 Ajax 开源项目之一,不仅让 Web 程序员可以免费获得和使用其框架进行 Web 应用的开发,更吸引了大量的开发者对其不断的扩充,开发新的组件.DojoX 就是在这样的开发社 ...
- 【总结整理】dojo学习
Dojo Toolkit 的特性可以分到 4 个不同部分.这种划分使得开发人员可以将库大小保持到最小,确保应用程序性能不受大量 JavaScript 库下载的影响.例如,如果您只需要 Ajax 支持性 ...
- dojo框架笔记
一.模块定义 1.定义只含值对,没有任何依赖的模块(moudle1.js) define({ color: "black", size: "unisize" } ...
- dojo学习(一)入门
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
随机推荐
- linux进程池模型
static int nchildren;static pid_t* pids;int main(int argc,char**argv){ int listenfd,i; socklen_t add ...
- 提交表单存在html标签报错-检测到有潜在危险的 Request.Form 值
1..aspx页面 在.aspx文件头中加入这句<%@ Page validateRequest="false" %> 2.通用方法 修改web.config文件, & ...
- Nginx 基本 安装..
ubuntu 下 Nginx是高度自由化的Web服务器,它的功能是由许多模块来支持.如果使用了某个模块,这个模块使用了一些类似zlib或OpenSSL等的第三方库,那么就必须先安装这些软件.Ubunt ...
- 1005 继续(3n+1)猜想(25 分)
卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 进行验证的时 ...
- django模型层 关于单表的增删改查
关于ORM MTV或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库, 通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人员 ...
- 29-----BBS论坛
BBS论坛(二十九) 29.帖子详情页布局 (1)front/hooks.py @bp.errorhandler def page_not_found(): return render_templat ...
- idea各种快捷键
工作的的时候,如果不知道idea一些方便的快捷键会大大影响工作效率,今天打算看看这些小技巧: https://blog.csdn.net/linsongbin1/article/details/802 ...
- 时间戳date 命令
时间戳date 命令 [chenxiaohao@iZbp1c0q444r0hp2gq8lhmZ server]$ echo $(date +%Y%m%d) ——————>今天 2018032 ...
- Python3 PIL Image 操作文件后导致占用问题
需求:按图片分辨率范围分类图片(每个商品有N张图片在一个目录内). 实现:用PIL Image打开图片并读取宽度和高度.然后按不同分辨率存档到不同目录. 问题:从原有目录移动到目标目录时出现 “Per ...
- HandlerInterceptor拦截器使用总结
简介 SpringMVC的处理器拦截器,类似于Servlet开发中的过滤器Filter,用于对请求进行拦截和处理. 常见应用场景 1.权限检查:如检测请求是否具有登录权限,如果没有直接返回到登陆页面. ...