本文将通过一个使用 Dojo1.6 的 iPad 本地化应用实例,讲述如何将其升级到 Dojo1.7,更好地进行移动应用的开发。
Dojo 是一个 ">JavaScript 框架,属于一个开源的项目,IBM 和 Sun 公司都宣布对 Dojo 的官方支持,为其贡献源码。 Dojo 主要用在 Web 工程项目中,能够使 Web 页面具有更好的动态效果。
随着移动应用快速发展,Dojo 也陆续加强对移动应用的支持,提供了更多的原生组件,达到同使用原生语言一样的用户体验。我们就有可能把原生的移动应用的开发,彻底转换成 Web 项目的开发,便于我们的移动应用可以跨平台使用。
Dojo1.7 作为 Dojo2.0 的过渡版本,兼容 Dojo1.6 版本,但是也带来了很多新的变化,无论从 Dojo 包的配置,还是到具体一个组件的编写,Dojo1.7 都与之前的方式截然不同。下面我们会先介绍在 Dojo1.7 中的一些新特性,然后用一个实例讲解在升版过程中需要注意的一些问题。
Dojo 1.7 新特性:AMD(Asynchronous Module Definition)
AMD 是一种异步模块加载机制,最初由 Dojo1.6 引入的一种新特性,并在 Dojo1.7 中得到全面支持。异步加载方式是 Dojo2.x 中模块加载主要方式,而 Dojo1.x 版本以同步加载方式为主。与同步加载方式相比,AMD 异步加载方式有着更多优势:一是 JS 库的重用,Dojo 可以加载其他支持 AMD 的 JS 库,反模块加载的性能提升;二是最小的模块依赖;三是匿名和非全局的模块设计;四是不使用全局的根变量(或对象)“dojo,dijit,dojox”,增加了安全性。
AMD 的定义模式是
( id?,dependencies?,factory )
其中:id 表示当前模块唯一标识,是可选的,如果忽略,默认为加载器访问的文件路径;如果该参数被指定,只能是绝对标识。
dependencies 是一组依赖模块数据,数组元素是模块的 id。依赖模块要先于 factory 功能模块进行加载,并传递给 factory 功能模块作为其参数使用。该参数是可选的,如果忽略,加载器会从 factory 模块中解析出数组数据。
factory 是工厂函数模块,模块进行加载时会进行调用。factory 可以是功能函数,这时仅被执行调用一次;也可以是对象、字符串等任意值,这时 module.exports 设置成 factory 的值。
下图为一个 AMD 定义模块实例。图中,省略了模块的 id,1 表示依赖模块的数组,用中括号 [] 包含依赖模块,每个元素用 '/' 分割文件路径,效果等同于 Dojo1.6 中使用 dojo.require。
2 表示 factory 工厂函数,被模块加载器加载,用括号 {} 包含工厂函数具体实现,其中参数 DataGrid 是依赖模块数组中的 dojox/grid/DataGrid,可以使用 JavaScript 中的任何变量名,包括符号 $ 进行表示,一般写成依赖模块全名中以 / 分割的最后一个变量。
3 调用了工厂函数中的参数表示的模块,在这个例子中,使用了 DataGrid 模块暴露的构造函数的功能。同时,也可以使用 DataGrid 模块暴露的其他 API。
4 是此模块暴露的 API,供该模块被调用或别名的形式表示时使用。这部分可以是任何对象或函数。另外,也可以使用 exports 向外提供 API。
图 1.AMD 定义模块
Dojo 1.7 新变化:dojox.mobile 新功能模块
Dojo1.6 中的 dojox.mobile 的文件结构如图所示:
图 2.Dojo1.6 的结构目录
Dojo1.7 的 dojox.mobile 的文件结构如图所示:
图 3Dojo1.7 的结构目录
从图中看出,Dojo1.7 在文件结构上出现变化,mobile 的特征以唯一的 js 文件的形式展示,而不是把大部分的 mobile 特征写在 dojox/mobile/_base.js 文件中。下面介绍在本文中使用的三种 mobile 新功能模块。
SpinWheel 是 Dojo1.7 中新增加的一个构件,实现了移动设备上旋转的滚轮的原生效果,供用户选择数据。它有两个子构件:日期构件和事件构件。
dojox.mobile.Opener 是 Dojo1.7 中新增加的一个效用构件,模仿移动设备上的弹出层或工具提示框的原生效果。
SwapView 是一个容器构件,支持用户 swipe 的方式切换移动设备上的显示视图,在 Dojo1.6 中,此构件的名字是 FlippableView。