Dojo翻译系列之一Hello Dojo!
翻译的不怎么好,以后会逐步修改的,好像博客园上面的Dojo文章很少啊。。。。。。。
Hello Dojo!
欢迎来到Dojo!,在这个教程中,你将学会怎样加载Dojo并且探索一些它的核心功能,你也将了解Dojo的基于AMD的模块架构,发现怎样加载额外的模块用来添加额外的功能到你的web站点或应用程序,同时当你遇到困难时怎么获取帮助。
准备开始
简单的包含dojo.js脚本到你的web页面就可以开始了,就像其他任何javascript文件一样,在流行的CDNs上dojo也是可以用的,那么准备一个文件名为hellodojo.html,在你的浏览器中打开它。
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Tutorial: Hello Dojo!title> 6 head> 7 <body> 8 <h1 id="greeting">Helloh1> 9 10 <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" 11 data-dojo-config="async: true">script> 12 body> 13 html>
通常情况下,一旦你加载了一个库的javascript文件,你就可以使用它的方法了,在过去的Dojo中这是真的,但是在dojo1.7release源码中采用了AMD格式,允许完全的模块化web应用程序开发,AMD被选择,是因为它使用纯javascript,允许源文件在web浏览器中工作,同时也支持一个构建过程使得生产优化资源,在部署中提高了应用的性能。
那么当dojo.js被加载时,什么是可用的呢?Dojo的AMD加载器,它定义了两个全局函数require和define,在Introduction to AMD tutorial.涵盖了大部分AMD的细节,作为开始,要理解require让你能加载模块并使用模块,define允许你定义你自己的模块,一个模块通常是单个javascript源文件
一些dojo的基本模块用来HTML DOM操作是dojo/dom 和 dojo/dom-construct.
让我们看看怎么加载模块并使用它们提供的功能
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Tutorial: Hello Dojo!title> 6 head> 7 <body> 8 <h1 id="greeting">Helloh1> 9 10 <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" 11 data-dojo-config="async: true">script> 12 13 <script> 14 require([ 15 'dojo/dom', 16 'dojo/dom-construct' 17 ], function (dom, domConstruct) { 18 var greetingNode = dom.byId('greeting'); 19 domConstruct.place(' Dojo!', greetingNode); 20 }); 21 script> 22 body> 23 html>
Require的第一个参数是一个模块标识数组module ids,--你想加载的模块标识,通常,直接映射到文件名,如果你夏总了dojo的源文件,查看dojo的目录,你将会看到dom.js和dom-construct.js文件中定义了那些模块。
AMD加载器操作是异步的,使用回调来实现javascript异步操作,require的第二个参数是回调函数,在这个函数中你提供你的代码来使用模块,AMD加载器传递模块作为回调函数的参数(按照在模块标识数组中指定的同样的顺序),在你的回调函数中你可以自由的命名你喜欢的参数名,但是出于一致性和可阅读性的目的,我们推荐使用基于模块标识的命名。
在18和19行,你可以看到dom和dom-construct模块用来通过ID获取一个DOM节点的引用,同时操作它的内容。
AMD加载器对于请求的模块将会自动的加载子依赖,因此,在你的依赖列表中仅仅需要你直接使用的的模块。
定义AMD模块
在此,你将会看到一个加载和使用模块的例子,为了定义和加载你自己的模块,你需要确保你从HTTP服务器上加载你的HTML文件(localhost是好的,但是你需要一个HTTP服务器,因为使用file:///协议会因为安全的微妙之处而阻止一些东西),对于这些例子,你不需要任何花哨的功能,而是您的web服务器提供文件的能力,添加demo文件夹到包含hellodojo.html的目录中,在demo目录中创建名为myModule.js的文件
1 demo/ 2 myModule.js 3 hellodojo.html
现在进入myModule.js
1 define([ 2 // The dojo/dom module is required by this module, so it goes 3 // in this list of dependencies. 4 'dojo/dom' 5 ], function(dom){ 6 // Once all modules in the dependency list have loaded, this 7 // function is called to define the demo/myModule module. 8 // 9 // The dojo/dom module is passed as the first argument to this 10 // function; additional modules in the dependency list would be 11 // passed in as subsequent arguments. 12 13 var oldText = {}; 14 15 // This returned object becomes the defined value of this module 16 return { 17 setText: function (id, text) { 18 var node = dom.byId(id); 19 oldText[id] = node.innerHTML; 20 node.innerHTML = text; 21 }, 22 23 restoreText: function (id) { 24 var node = dom.byId(id); 25 node.innerHTML = oldText[id]; 26 delete oldText[id]; 27 } 28 }; 29 });
AMD 的define函数和require函数接收同样的参数,一个模块标识数组和一个回调函数,AMD加载器存储了回调函数的返回值作为模块的值,因此任何其他代码使用require或者define加载模块,将接收一个此定义模块返回值的引用。
CDN用法
加载本地模块当从CDN上使用dojo需要一点额外的配置,配置dojo的AMD加载器和用CDN使用Dojo被找到在Advanced AMD 和 Using Modules with a CDN 教程
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Tutorial: Hello Dojo!title> 6 head> 7 <body> 8 <h1 id="greeting">Helloh1> 9 10 <script> 11 // Instead of using data-dojo-config, we're creating a dojoConfig 12 // object *before* we load dojo.js; they're functionally identical, 13 // it's just easier to read this approach with a larger configuration. 14 var dojoConfig = { 15 async: true, 16 // This code registers the correct location of the "demo" 17 // package so we can load Dojo from the CDN whilst still 18 // being able to load local modules 19 packages: [{ 20 name: "demo", 21 location: location.pathname.replace(/\/[^/]*$/, '') + '/demo' 22 }] 23 }; 24 25 26 27 28