关于JavaScript中this的使用,这是一个由来已久的问题了。
我们这里就不介绍它的发展历史了,只结合具体的例子,告诉大家可能会遇到什么问题,在遇到这些问题时EXT是如何解决的。
在使用EXT时,最常碰到的就是使用Ajax回调函数时出现的问题,如下面的代码所示:
- <input type="text" name="text" id="text">
- <input type="button" name="button" id="button" value="button">
现在的HTML 页面中有一个text输入框和一个按钮。我们希望按下这个按钮之后,能用Ajax去后台读取数据,然后把后台响应的数据放到text中,实现过程如下:
- var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});
后台需要返回EXT所需要的JSON格式的数据,下面的内容就是后台使用JSP的一个范例,如下面的代码所示。
- function doSuccess(response) {
- text.dom.value = response.responseText;
- }
- Ext.onReady(function(){
- Ext.get('button').on('click', function(){
- var text = Ext.get('text');
- Ext.lib.Ajax.request(
- 'POST',
- '08.txt',
- {success:doSuccess},
- 'param=' + encodeURIComponent(text.dom.value)
- );
- });
- });
在上面的代码中,Ajax已经用Ext.get('text')获得了text,以为后面可以直接使用,没想到回调函数success不会按照你写的顺序去执行。
当然,也不会像你所想的那样使用局部变量text。
实际上,如果什么都不做,仅仅只是使用回调函数,你不得不再次使用Ext.get('text')重新获得元素,否则浏览器就会报text未定义的错误。
在此使用Ext.get('text')重新获取对象还比较简单,在有些情况下不容易获得需要处理的对象,
我们要在发送Ajax请求之前获取回调函数中需要操作的对象,有两种方法可供选择:scope和createDelegate。
1. 为Ajax设置scope
- function doSuccess(response) {
- this.dom.value = response.responseText;
- }
- Ext.lib.Ajax.request(
- 'POST',
- '08.txt',
- {success:doSuccess,scope:text},
- 'param=' + encodeURIComponent(text.dom.value)
- );
在Ajax的callback参数部分添加一个scope:text,把回调函数的scope指向text,它的作用就是把doSuccess函数里的this指向text对象。
然后再把doSuccess里改成this.dom. value,这样就可以了。
如果想再次在回调函数里用某个对象,必须配上scope,这样就能在回调函数中使用this对它进行操作了。
2. 为success添加createDelegate()。
- function doSuccess(response) {
- this.dom.value = response.responseText;
- }
- Ext.lib.Ajax.request(
- 'POST',
- '08.txt',
- {success:doSuccess.createDelegate(text)},
- 'param=' + encodeURIComponent(text.dom.value)
- );
createDelegate只能在function上调用,它把函数里的this强行指向我们需要的对象,
然后我们就可以在回调函数doSuccess里直接通过this来引用createDelegate()中指定的这个对象了。
它可以作为解决this问题的一个备选方案。
如果让我选择,我会尽量选择scope,因为createDelegate是要对原来的函数进行封装,重新生成function对象。
简单环境下,scope就够用了,倒是createDelegate还有其他功能,比如修改调用参数等。
发表评论
-
在Eclipse下面安装spket
2011-05-25 18:35 1027spket 简介:是一个支持 ... -
下拉框无法读取后台相应的JSON数据
2011-05-10 15:44 1{ fieldLabel : '所属机构', ... -
11.localXHR支持本地使用Ajax
2011-04-21 10:40 735Ajax是不能在本地文件系统中使用的,必须把数据放到服务器上。 ... -
10.Ext与Dwr
2011-04-21 10:39 717在EXT中直接使用DWR 因为DWR在前台的表现形式和普 ... -
8.Ext.Ajax
2011-04-21 10:38 1173Ext.Ajax的基本用法如下 ... -
6.常用Reader
2011-04-21 10:37 768常用Reader之ArrayReader 从proxy中 ... -
5.常用proxy
2011-04-21 10:35 719常用proxy之MemoryProxy MemoryPr ... -
4.Ext.data.Store
2011-04-21 10:34 967Ext.data.Store是EXT中用来进行数据交换和数 ... -
3.Ext.data.Record
2011-04-21 10:30 1690Ext.data.Record Ext.data.Recor ... -
2.Ext.data.Connection
2011-04-21 10:27 794Ext.data.Connection Ext.data.C ... -
1.Ext.data简介
2011-04-21 10:25 689Ext.data在命名空间中定义了一系列store、reade ...
相关推荐
10.9 关于scope和createDelegate() ....247 10.10 DWR与EXT整合..................................249 10.10.1 在EXT中直接使用DWR......249 10.10.2 DWRProxy............................250 10.10.3 ...
NULL 博文链接:https://yiminghe.iteye.com/blog/394170
JSON数据格式简洁,用于数据的持久化和对象传输很实用。 java下有个大名鼎鼎的阿里巴巴开源的Java的JSON处理器 fastjson,.net也有个.net版的fastjson。这里是作者做的性能测试:代码调用namespace test { class...
概述 本文涉及到的反射优化的途径有如下两种: 通过Delegate.CreateDelegate()创建委托进行优化 通过.NET4的动态运行时进行优化 如果您还知道其他更加有效的优化途径,请不吝赐教! 准备工作 今天我们总计要对比五...
android手机应用源码Imsdroid语音视频通话源码.rar
营销计划汇报PPT,市场品牌 推广渠道 产品 营销策略tbb.pptx
JavaScript
JavaScript
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
520表白html5爱心代码
520表白html5爱心代码 一个简单的HTML5和CSS代码示例,用于创建一个动态的爱心形状,并在网页上展示一个类似520表白的消息。这个示例使用了CSS的动画效果和HTML的结构。
智慧养老社区方案.pdf
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
JavaScript
codeviz 1.0.12
JavaScript
JavaScript
JavaScript
JavaScript
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。