标签‘dojo’

Ajax应用事件处理及浏览器内存泄漏实践

事件处理是 Ajax 应用中的重要组成部分,也是应用动态变化的源动力。本文详细介绍了浏览器中的事件处理相关的内容,包括注册事件监听器、事件发生之后的传播机制、编写事件监听器等,还介绍了 Dojo 对事件处理提供的支持。最后介绍了与浏览器内存泄露和性能相关的最佳实践。

浏览器中的事件是 Ajax 应用动态变化的源动力。用户通过输入设备(主要是键盘和鼠标)与应用进行互动。对于用户不同的动作,如点击鼠标左键、右键、或是按下键盘上的回车键,浏览器会产生与之对应的事件。这些事件按照一定的规则在当前文档树中传播。应用可以根据自己的需要,对特定的事件进行处理,以响应用户的动作。这种事件驱动的方式,不仅在 Web 应用中被使用,在桌面应用中也广泛流行。本文详细介绍了浏览器中事件处理的各个方面,包括事件监听器的注册、事件的传播、事件处理和其它高级话题。本文还介绍了如何使用 Dojo 提供的 dojo.connect()。本文中使用的 Dojo 版本是 1.4。下面首先介绍如何注册事件监听器。

注册事件监听器

注册事件监听器的目的是在事件发生的时候添加相应的处理逻辑。浏览器中的事件处理采用经典的观察者(Observer)设计模式。对于可能产生的各种事件,Ajax 应用通过脚本在节点上关注自己感兴趣的事件,并添加相应的处理逻辑。当相应的事件发生并传播到监听器注册的节点时,处理逻辑会被调用。 查看更多...

两种方式使用Dojox.grid.DataGrid

Dojo的widget机制设计的很不错,默认提供了很多好用的widget,其中DataGrid就是最常用的一种,正常情况下,很多人会选择使用声明式的引入,就是在页面上写入任意html标签,指定dojoType为Dojox.grid.DataGrid,当然,既然是widget,也就支持另外一种方式,也是我比较喜欢用的方式,即编程式引入。

第一种

先通过引入dojo.data.ItemFileWriteStore,构建test_store,简单的理解,即数据源,对应DataGrid的store。dojo的dojo.data.ItemFileWriteStore可以方便的使用ajax请求的相应数据。下面是示例代码: 查看更多...

细谈可刷新Ajax无刷新应用的构建及原理

想必看标题就有一大部分朋友懵了,其实这个标题完全没有错,我要说的就是目前流行的ajax应用的构建。众所周知,ajax应用的核心就是使用javascript异步调用XmlHttp发送请求并接收数据,然后在前台进行局部刷新,从而达到无刷新改变页面内容的效果。但在很多场合,如果使用大量的ajax,虽然可以使应用使用体验更佳,却避免不了用户因为各种因素而进行的全局刷新。

举个例子,有个文章管理页面,完全是由ajax实现的,在默认情况下显示文章列表,点击某按钮或链接的情况下异步加载了文章添加的界面,此时如果用户刷新了页面,先不说已经写下的内容,页面是不是又回到了列表状态呢?没错,这就是我要说的问题。

其实之前就有过此类困扰,后来为了兼顾各方面灵活性,就采用了多页面的方式,部分地方还使用了iframe。最近又做项目使用了大量ajax,同理,遇到同样的问题。 查看更多...

dojo实现的两种拖拽方式(拖动、拖放)

Web2.0的时代,网页中常常会用到拖拽的效果,这里了解下使用dojo来实现拖拽。在开始尝试了解dojo拖拽效果以前,必须明确拖拽具有两种截然不同的表现效果。

第一种表现效果是图标被拖拽到哪里,其就会被直接放到哪里,这个拖拽效果是图标完全紧跟拖拽的动作,与每一个拖拽动作的运动轨迹完全契合,这种效果被称为“ 拖动”。第二种表现效果是当图标被拖拽到一个地方,松开鼠标的时候,图标会以当前位置为基础而以其它图标为参照系进行位置的自动调整。这种效果被称为“拖放”。

dojo的拖动

“拖动”与“拖放”相比较,原理更加容易理解,使用更加简单。而且更加贴近于人们直观印象中的“拖拽”效果。

最简单的拖动实例

要在 dojo 的支持下,实现拖动的效果所需要的只是使用 dojo 所提供的 dojo 标签属性标注出希望实现拖动效果的实体。 查看更多...

dojo widget生命周期及使用详解

dojowidgetDojo所开发的控件具有很强的内聚性和面向对象性。dojo的dijit._widget是dojo提供的图形界面组件库。

首先从dijit组件的核心类dijit._Widget开始
dijit._Widget是所以dijit组件的父类,dijit默认提供的组件和自己开发的组件都要继承此类。dijit._Widget提供了对组件生命周期的管理。dijit组件生命周期管理在实现的时候使用了template method设计方式。dijit._Widget的create()方法定义了默认模版。开发人员也可以覆盖create()方法,提供一套不同的生命周期实现。dijit定义的生命周期实现:

图中椭圆行的三个方法是dijit提供的扩展点,用户可以自己覆盖这些方法。 查看更多...

dojo.io.iframe异步发送form数据包

今天在使用dojo进行异步请求动作的同时,加入了一个文件上传,由于不想引入struts等框架,采用了古老的jspsmartupload,结果用xhrPost异步提交时无论如何都没有反应,鉴于公司限网,只好回家查资料了。搜索一番发现dojo中想异步上传数据包,有一个专门的方法,就是使用dojo.io.iframe。

这里,顺带提一下dojo的XHR,XHR框架是dojo对ajax支持的一组方法,允许想服务器端发出get、post、put、delete请求,这些方法包括:xhrGet、xhrPost、xhrPut、xhrDelete。具体在前面转载的文章《用Dojo实现XHR、跨域、及其他Ajax请求》中描述的很清楚,有需要的可以去了解。
这里需要注意,所有这些函数都遵守相同的语法:接受一个属性配置对象作为参数。在这些对象中您可以定义您想要发出的Ajax请求的各个方面。再一次说明,这些选项在所有XHR函数中都是一样的。 查看更多...

Dojo基本DOM操作函数记录

最近接触dojo,发现dojo很强大了,但没有系统学习过dojo,用起来还是很吃力,譬如不知道基础的dom操作等,都得找文档临时学习。总体来说,dojo目前的写法类似于extjs,但又不局限于extjs之类的框架。下面分享一下基础的dom操作函数及说明。

基本的DOM操作只是用到了dojo的核心文件.使用dojo.query将返回一个匹配到的节点数组dojo.Nodelist, 这个数组内建了一些常用的方法. 可以操作DOM

使用dojo的方法:

dojo.ready(function(){
	//TODO
});

TODO部分实现你想要的dojo操作。
查看更多...

用Dojo实现XHR、跨域、及其他Ajax请求

工作之余,收集了dojo的入门知识,以便以后查用。下面是用Dojo实现XHR、跨域、及其他Ajax请求的介绍,希望有用。

在任何浏览器上方便地实现Ajax请求是每一个Ajax框架的初衷。Dojo在这方面无疑提供了非常丰富的支持。除了XMLHttpRequest之外,动态script、iframe、RPC也应有尽有,并且接口统一,使用方便,大多数情况下都只需要一句话就能达到目的,从而免除重复造轮子的麻烦。而且,Dojo一贯追求的概念完整性也在这里有所体现,换句话说,在使用Dojo的Ajax工具的过程中不会感到任何的不自然,相反更容易有触类旁通的感觉,因为API的模式是统一的,而且这里涉及到的某些概念(如Deferred对象)也贯穿在整个Dojo之中。

Dojo的XHR函数

Dojo的XMLHttpRequest函数就叫dojo.xhr,除了把自己取名美元符号之外,这好像是最直接的办法了。它定义在Dojo基本库里,所以不需要额外的require就能使用。它可以实现任何同域内的http请求。不过更常用的是dojo.xhrGet和dojo.xhrPost,它们只不过是对dojo.xhr函数的简单封装;当然根据REST风格,还有dojo.xhrPut和dojo.xhrDelete。 查看更多...