学习Dojo笔记

你好 Dojo!

欢迎来到Dojo!在本教程中,你将会学习怎样加载Dojo并且开始探索一些它的核心功能。当然你也会学习到Dojo的基于AMD的模块结构,发现如何来加载模块为你的Web网站或者APP来添加额外的功能,并且发现怎样来得到帮助当有错误出现时。

开始使用

开始使用Dojo就和包含dojo.js脚本在网页中一样简单,就像任何其他的JavaScript文件一样。Dojo很受CDNs欢迎,所以在一个名为hellodojo.html的文件里输入如下代码并且用web浏览器打开它。(学习Dojo很简单,开始照着步骤来吧)

通常,你一旦加载了一个库的JavaScript文件,你就拥有了他的所有方法。对于过去的Dojo来说确实如此,但是随着1.7版本的发布,Dojo采用了异步模块加载机制(AMD)格式对于它的源代码,允许了完全模块化的开发Web应用。AMD之所以被选中是因为它使用纯粹的JavaScript。允许源文件在Web浏览器中工作,同时还支持一个制作最优化办法用来提高应用在部署中应用性能的开发过程。(随着新版本的发布Dojo开始采用AMD了)

所以当dojo.js加载成功时什么是可用的呢?是Dojos AMD,它定义了两个全局函数,requiredefine。所以你能明白这些就足够了:require使你能够加载模块并使用他们;define允许你定义你自己的模块。一个模块通常是一个单一的JavaScript源文件。(记住两个全局函数requiredefine)

Dojo的一些HTML dom操作基本模块是dojo/domdojo/dojo-construct.来看看怎么加载这些模块和使用它们提供的功能。

第一个require参数(14-17行)是一个模块ID的数组——你想要加载模块的标识符。通常,它们是直接映射到文件名的。如果你看dojo目录,你会看到dom.jsdom-construct.js文件。(文件名就是模块名)

AMD loaders异步操作, JavaScript异步操作实现时伴随回调,所以第二个require参数(17行)是个回调函数。(你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。作者:常溪玲链接:https://www.zhihu.com/question/19801131/answer/13005983 来源:知乎)在这个函数中你提供了使用这些模块的代码。AMD loader将模块作为参数传递给回调函数。(以同样的顺序,他们在模块Id数组中被指定)您可以自由地为回调函数命名参数,无论您喜欢什么。但是为了一致性和可读性,我们推荐使用基于模块ID的名称。

在第18行和第19行中,您可以看到DOMDOM构建模块用于通过id获得对DOM节点的引用并操作其内容。

The AMD loader将自动加载所有子依赖请求的模块,所以只有模块,你需要直接使用应该在你的从属列表。 

定义AMD模块

在这一节中你将会看到加载以及使用模块的例子,为了定义和家在你自己的模块,你需要确定你从HTTP服务中加载了你的HTML文件。除了服务文件的功能外,您不需要Web服务器中任何花哨的特性。创建一个包含hellodojo.html文件的demo目录,并且在其中创建一个命名为myModule.js的文件。

 

myModule.js文件中输入如下代码

 

AMD define函数接受类似的参数对于require函数——一个模块ID的数组和一个回调函数。AMD loader存储回调函数的返回值作为模块的值,所以任何加载了requiredefine模块的代码都会收到一个定义模块的返回值的一个引用。

CDN的使用

加载本地模块同时使用DojoCDN需要一点额外的配置,按如下代码更新hellodojo.html文件。

 

除了对Dojo添加配置外,我们重新定义了主要代码——现在他仅仅加载了demo/myModule,并利用它完成页面上文本的操作。如你所见,定义和加载模块是如此简单。(???)在第26行我们改变了dojo.jsURL来省略协议——这就创建了一个链接,它使用页面使用的任何协议(HTTPHTTPS)。防止在某些浏览器中引发安全警告的混合内容。

AMD模块中组织代码允许您创建模块化JavaScript源,该源在浏览器中立即可执行。而且易于调试。AMD模块使用局部作用域变量,避免在全局命名空间中混乱和名称解析提供更快。AMD是一个具有多种实现的标准规范,所以你没有被锁定在任何一个实现中——   

使用任何AMD loader来用AMD模块。

等待DOM

首先执行代码之前你要确认浏览器的DOM是可用的。这些是通过叫“plugin的特殊AMD模块实现的。Plugins可以被请求就像其他任何模块一样,但是它们的特殊功能只有通过在模块标识符的结尾添加感叹号来激活。在DOM就绪事件的情况下,Dojo提供了dojo/domReady插件。只需将此插件作为任何请求或定义调用的依赖项,在DOM就绪之前,回调将不会被触发: