Dojo 1.6 新特性: 异步模块加载机制AMD

本文翻译自: Asynchronous Modules Come to Dojo 1.6 @H_502_2@

原作者:@H_502_2@ Kris Zyp

翻译: feijia

在最新的@H_502_2@ 1.6 @H_502_2@ 版本中，@H_502_2@ Dojo(Core) @H_502_2@ 和@H_502_2@ Dijit @H_502_2@ 已经进行了代码重构首次引入了符合@H_502_2@ CommonsJS AMD API 规范的异步模块加载机制@H_502_2@ (AMD)@H_502_2@

@H_502_2@

模块的兼容性@H_502_2@

通过重构，现在@H_502_2@ Dojo@H_502_2@ 的模块已经完全和下列框架兼容@H_502_2@ :@H_502_2@

RequireJS
Nodules,Node.js @H_502_2@ 的一个子项目用来处理模块加载 @H_502_2@
Backdraft Framework,Dojo@H_502_2@ 未来的模块加载器的主要候选框架之一@H_502_2@
以及所有其他符合@H_502_2@ AMD@H_502_2@ 规范的模块装载器@H_502_2@

灵活性@H_502_2@ ,@H_502_2@ 性能提升@H_502_2@ 和@H_502_2@ 堆栈状态@H_502_2@

这次重构给@H_502_2@ Dojo@H_502_2@ 带来了极好的灵活性，既可以支持传统的同步装载，也可以支持新的基于标签的装载机制。使用新的装载机制会带来很大的性能提升，并且降低了调试的难度@H_502_2@ (@H_502_2@ 因为你可以看到很清晰的堆栈状态@H_502_2@ )@H_502_2@

@H_502_2@

匿名模块@H_502_2@

AMD @H_502_2@ 模块规范的另一个重要的优势是它允许定义匿名模块，@H_502_2@ 降低了代码与其所属模块的名称间的耦合。使用匿名模块，模块的名称与身份符合@H_502_2@ DRY@H_502_2@ 原则，@H_502_2@ （@H_502_2@ Don’t repeat yourself ）@H_502_2@ ,@H_502_2@ 避免了模块名字在源代码文件名和代码本身中的重复。这种做法使得代码的更容易移植，一段代码可以被放置在任意文件夹或包中而不用修改代码本身。（译者:一个匿名模块在使用时可以随意定义其名字@H_502_2@ ,@H_502_2@ 因此可以很容易的解决模块的重名等冲突情形）。@H_502_2@ AMD @H_502_2@ 使用斜杠分割的模块名而不是使用点分割模块名，从而模块路径可以更直接的映射到@H_502_2@ URL@H_502_2@ ，并允许使用相对路径来引用其他模块。这使得树状文件夹结构也有了移植性@H_502_2@ . (@H_502_2@ 一个包含一组模块的文件夹可以被移动，改名，而其所包含的模块文件的相对名称不会失效@H_502_2@ )@H_502_2@

@H_502_2@

向后兼容性@H_502_2@

所有基于传统的@H_502_2@ dojo.provide/dojo.require @H_502_2@ 的代码将仍然有效。@H_502_2@ 默认情况下，@H_502_2@ Dojo@H_502_2@ 使用一个向后兼容的同步加载器，所以你可以继续使用下面的代码@H_502_2@ :@H_502_2@

// 同步加载 dijit.tree dojo.require ( "dijit.Tree" ) ; // 加载后 dijit.tree 已经可以使用了 new dijit.Tree ( …) ;
@H_502_2@

使用新的模块加载机制@H_502_2@

虽然传统的同步机制和@H_502_2@ api@H_502_2@ 仍然保留，不过你已经可以在@H_502_2@ Dojo1.6@H_502_2@ 中尝试使用新的@H_502_2@ AMD@H_502_2@ 模块加载器来享受@H_502_2@ 异步加载的好处了@H_502_2@ （速度更快，性能更好）@H_502_2@

警告@H_502_2@ : @H_502_2@ 在@H_502_2@ Dojo 1.6 @H_502_2@ 中，@H_502_2@ 针对@H_502_2@ AMD@H_502_2@ 的重构仍然属于一个过渡期的改动@H_502_2@ ,@H_502_2@ 用户自己开发的@H_502_2@ AMD@H_502_2@ 模块还不能被@H_502_2@ Dojo@H_502_2@ 的加载器和@H_502_2@ Build @H_502_2@ 系统支持@H_502_2@ . 1.6@H_502_2@ 中现有的@H_502_2@ 编译@H_502_2@ 系统对@H_502_2@ AMD@H_502_2@ 的支持还非常局限。@H_502_2@ 如果你自己开发了@H_502_2@ AMD@H_502_2@ 格式的模块，并且你仍然在使用默认的@H_502_2@ Dojo@H_502_2@ 同步模块加载器，那么你必须严格遵循@H_502_2@ Dojo@H_502_2@ 模块的格式@H_502_2@ (@H_502_2@ 包括换行的格式@H_502_2@ )@H_502_2@ 来保证你自己的模块能够成功编译@H_502_2@ . @H_502_2@

@H_502_2@

Dojo 1.6 @H_502_2@ 中并未官方支持对于@H_502_2@ AMD@H_502_2@ 模块的编译，@H_502_2@ 但是如果你可以遵循@H_502_2@ Dojo@H_502_2@ 模块的声明风格，编译系统当然也会正常工作。@H_502_2@ 而由@H_502_2@ RequireJS@H_502_2@ 和@H_502_2@ Backdraft @H_502_2@ 提供的编译工具是为@H_502_2@ AMD@H_502_2@ 专门设计的，因此具有更好的鲁棒性。@H_502_2@

@H_502_2@

虽然@H_502_2@ Dojo 1.6 @H_502_2@ 并没有正式声明支持用户自定义的@H_502_2@ AMD@H_502_2@ 模块或异步加载，但是许多用户已经成功的测试过了，并且这无疑是@H_502_2@ Dojo@H_502_2@ 未来将会正式支持的特性@H_502_2@ . @H_502_2@

@H_502_2@

创建一个@H_502_2@ AMD @H_502_2@ @H_502_2@ 模块非常简单：@H_502_2@

在@H_502_2@ define @H_502_2@ 方法的第一个参数中@H_502_2@ 传入一个数组@H_502_2@ 定义该模块依赖的其他模块@H_502_2@

提供一个回调函数，当依赖模块都加载完毕后可以执行你的模块@H_502_2@

@H_502_2@

define([ "dijit/Tree" ],function ( Tree){ // 该回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>被执行时，说明 dijit .Tree 已经加载完毕，我们可以用本地变量 Tree 来表示该模块 new Tree( …) ; }) ; @H_502_2@
@H_502_2@

这样定义的模块就已经可以被@H_502_2@ Dojo@H_502_2@ 异步加载器或@H_502_2@ RequireJS@H_502_2@ 所使用了。同时你也可以用标准的@H_502_2@ dojo.require() @H_502_2@ 来使用。@H_502_2@

总结一下在@H_502_2@ Dojo1.6 @H_502_2@ 中你可以使用的几种加载方式@H_502_2@ :@H_502_2@

用传统的方法@H_502_2@ (dojo.require()/dojo.provide()) – @H_502_2@ 这些模块，只能被@H_502_2@ Dojo@H_502_2@ 同步加载器@H_502_2@ 加载，但可以被@H_502_2@ Dojo@H_502_2@ 编译系统(Build System )正确的编译@H_502_2@
用@H_502_2@ Dojo@H_502_2@ 同步加载器来加载@H_502_2@ AMD@H_502_2@ 格式（ @H_502_2@ define@H_502_2@ @H_502_2@ @H_502_2@ ()）@H_502_2@ @H_502_2@ @H_502_2@ 模块@H_502_2@ – @H_502_2@ 这些模块可以被正常的加载，并且可以被其他兼容@H_502_2@ AMD@H_502_2@ 格式的加载器加载@H_502_2@ . @H_502_2@ 现在虽然@H_502_2@ Dojo1.6 @H_502_2@ 还没有正式支持这种用法，@H_502_2@ 但在目前的@H_502_2@ Dojo1.6 @H_502_2@ 编译系统中，是可以正常工作的@H_502_2@ . (@H_502_2@ 前提是你必须严格遵循@H_502_2@ Dojo@H_502_2@ 模块定义的代码规范@H_502_2@ )@H_502_2@
@H_502_2@ 使用第三方加载器来加载@H_502_2@ AMD@H_502_2@ 格式（@H_502_2@ define@H_502_2@ ()）模块@H_502_2@ – @H_502_2@ 模块可以被正常加载，并且可以被其他加载器所使用@H_502_2@ . @H_502_2@ 这些模块可以使用@H_502_2@ RequireJS@H_502_2@ 或@H_502_2@ Backdraft @H_502_2@ 提供的编译系统正常编译，但是@H_502_2@ Dojo@H_502_2@ 还没有正式的测试过和其他加载器的兼容性@H_502_2@ .@H_502_2@

@H_502_2@

模块的引用@H_502_2@

@H_502_2@

当在@H_502_2@ Dojo@H_502_2@ 中使用@H_502_2@ AMD@H_502_2@ 格式时，有下列几种方式来引用一个模块@H_502_2@ .@H_502_2@

首先，@H_502_2@ AMD@H_502_2@ 推荐的模块引用方法是将需要引用的模块声明在依赖模块声明中，并且在回调函数定义时使用相应的参数作为该模块的假名@H_502_2@ ,@H_502_2@ 像我们在前面声明一个使用@H_502_2@ dijit.tree@H_502_2@ 的模块那样@H_502_2@ . @H_502_2@ @H_502_2@ 然而，这种做法并不被@H_502_2@ Dojo 1.6 @H_502_2@ 编译系统所支持@H_502_2@ . @H_502_2@ @H_502_2@ 这种格式只能适用于@H_502_2@ AMD@H_502_2@ 完全兼容的加载器中。例如：@H_502_2@

define([ "dojo/cookie","dijit/Tree" ],function ( cookie,Tree){ var cookieValue = cookie( "cookieName" ) ; // get a cookie new Tree( …) ; // create a dijit.Tree }) ;
@H_502_2@

@H_502_2@

这样做相对于使用嵌套对象作为命名空间的来引用模块中的对象的传统方法来说有很大优势。因为我们不再需要重复的去键入一个完整的命名空间路径了@H_502_2@ . @H_502_2@ （译者@H_502_2@ : @H_502_2@ 过去要引用@H_502_2@ dijit.Tree @H_502_2@ 的中的某个方法，我们需要每次都使用@H_502_2@ dijit.tree@H_502_2@ ）而现在我们只需要在依赖定义中给出一次完整的路径@H_502_2@ （@H_502_2@ dojo/cookie @H_502_2@ 和@H_502_2@ dijit/tree@H_502_2@ ）@H_502_2@ ,@H_502_2@ 一旦它们被加载，回调函数中我们就可以直接使用该模块的假名来引用它了@H_502_2@ ( @H_502_2@ 本例中就是@H_502_2@ cookie,@H_502_2@ 和@H_502_2@ Tree) . @H_502_2@

@H_502_2@

然而，@H_502_2@ 对于那些需要继续使用@H_502_2@ Dojo @H_502_2@ 现有的编译系统，或是希望保留现有的代码风格，或是希望把现有的代码移植到新的@H_502_2@ AMD@H_502_2@ 格式的人来说，@H_502_2@ 我们可以将@H_502_2@ dojo,dijit @H_502_2@ 声明为依赖模块，这样原有的代码就可以正常工作了。@H_502_2@ 需要注意的是，@H_502_2@ 即便如此，我们仍然需要列出我们的依赖模块(dojo/cookiet 和dijit/tree)，虽然在代码里我们不会直接使用它们了@H_502_2@ ,@H_502_2@ 例如上面的代码可以改写成@H_502_2@

define([ "dojo","dijit","dojo/cookie",function ( dojo,dijit){ var cookieValue = dojo.cookie ( "cookieName" ) ; // get a cookie new dijit.Tree ( …) ; // create a dijit.Tree }) ;
@H_502_2@

@H_502_2@

显然这样的代码有点啰嗦，@H_502_2@ 但是它使得传统的@H_502_2@ Dojo@H_502_2@ 代码风格得以保持，因此在移植现有代码时尤为有用@H_502_2@ 。@H_502_2@

@H_502_2@

另外需要注意的是，@H_502_2@ 新的@H_502_2@ AMD@H_502_2@ 格式的代码模块不能和旧版的@H_502_2@ Dojo@H_502_2@ 一起工作。@H_502_2@ 因此你不能直接复制一个@H_502_2@ Dojo 1.6 @H_502_2@ 的模块到某个过去版本的@H_502_2@ Dojo @H_502_2@ 里。@H_502_2@ 如果你想这样做，@H_502_2@ 你需要手动的去修改这些模块，把它们改成使用@H_502_2@ dojo.require/dojo.provide @H_502_2@ 的@H_502_2@ API @H_502_2@ （当然，类似的你要去修改所有被该模块引用的模块）@H_502_2@

@H_502_2@

联合使用@H_502_2@ Dojo@H_502_2@ 与@H_502_2@ RequireJS@H_502_2@

@H_502_2@

Dojo@H_502_2@ 可以在@H_502_2@ RequireJS@H_502_2@ 上运行，使用@H_502_2@ RequireJS@H_502_2@ 作为其模块加载器。@H_502_2@ 首先，加载@H_502_2@ RequireJS@H_502_2@ ，@H_502_2@ 然后把@H_502_2@ Dojo@H_502_2@ 配置成一个包@H_502_2@ :@H_502_2@

<mce:script src="require.js" mce_src="require.js"></mce:script> <mce:script type="text/javascript"></mce:script>
@H_502_2@

@H_502_2@

接下来，我们就可以装载自己的应用程序模块了，@H_502_2@ 该模块使用@H_502_2@ Dojo@H_502_2@ 作为其依赖@H_502_2@

<mce:script type="text/javascript"></mce:script>
@H_502_2@

@H_502_2@

My-module @H_502_2@ 定义如下@H_502_2@ :@H_502_2@

define([ "dojo" ],function ( dojo){ dojo.query ( "some-query" ) … … }) ;
@H_502_2@

@H_502_2@

在与@H_502_2@ Dojo@H_502_2@ 一起使用@H_502_2@ RequireJS@H_502_2@ 时需要注意以下几点@H_502_2@ :@H_502_2@

RequireJS@H_502_2@ 在管理模块的加载，因此@H_502_2@ Dojo @H_502_2@ 不知道何时去解析@H_502_2@ HTML@H_502_2@ 中的通过声明方式定义的控件。在页面加载完成，并且你所需要的所有模块都加载完成后，你需要手动的调用@H_502_2@ dojo.parser.parse() @H_502_2@
需要使用@H_502_2@ RequireJS@H_502_2@ 提供的编译工具@H_502_2@

@H_502_2@

我们会在近期提供如何集成@H_502_2@ Backdraft @H_502_2@ 与@H_502_2@ Dojo@H_502_2@ 的信息，这项工作很快会开始@H_502_2@ .@H_502_2@

@H_502_2@

我们还在开发一个包安装工具，它可以自动生成你的配置信息。@H_502_2@

@H_502_2@

我们非常期待看到通过将@H_502_2@ AMD@H_502_2@ 引入@H_502_2@ Dojo@H_502_2@ 带来的改进。@H_502_2@ 这也是我们走向包自动管理（@H_502_2@ autonomous packages@H_502_2@ ）的一个关键步骤。请在近期持续关注我们发布的信息。@H_502_2@ 如果你也对此感兴趣，请告诉我们。@H_502_2@

Dojo 1.6 新特性: 异步模块加载机制AMD

模块的兼容性@H_502_2@

灵活性@H_502_2@ ,@H_502_2@ 性能提升@H_502_2@ 和@H_502_2@ 堆栈状态@H_502_2@

匿名模块@H_502_2@

向后兼容性@H_502_2@

使用新的模块加载机制@H_502_2@

模块的引用@H_502_2@

联合使用@H_502_2@ Dojo@H_502_2@ 与@H_502_2@ RequireJS@H_502_2@

相关推荐