513前端学习资料----dojo入门(1)

最新推荐文章于 2023-07-29 17:39:12 发布

yatsov

最新推荐文章于 2023-07-29 17:39:12 发布

阅读量426

点赞数 3

分类专栏： dojo 文章标签： dojo

dojo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本资料是513实验室学习用资料的前端部分。有我和成晓玲同学共同完成。主要是对dojo 文档进行了翻译理解用于学习。

Dojo学习

欢迎来到DOJO！这部分你将学习：1）如何加载dojo；2）领会其中的一些核心功能；3）AMD异步加载。

1、入门

Dojo的加载很简单，引用dojo的js文件即可，就像任何其他Javascript文件,实例代码（example1-1.html）如下。

在dojo1.7之后使用了异步模块定义（AMD）的格式作为它的源代码，从而允许完全模板块的web应用程序的开发。之所以选择AMD，是因为它与纯Javascript一起，允许源文件在web浏览器工作，同时还支持构建过程生产优化资源，以加强在部署应用程序的性能。

所以，当dojo.js加载之后有什么用？Dojo的AMD加载器，它定义了两个全局函数：require和define。Require的目的是让模块加载并被用户使用，define能够让你自己定义一个js模块，一个模块通常是一个JavaScript源文件。

HTML DOM操作的基本模块是dojo/dom和dojo/dom-construct，下面来看示例(example.html1-1)如何进行使用。

require的第一个参数是一组模块的ID-你要加载模块的标识符（这个ID是用于辨识模块的，通常是它源码中的路径）。一般来说，这些直接映射到文件名，如果你想下载dojo的源分布，并期待在dojo目录中，你将会看到dom.js和dom-construct.js定义的模块文件。

AMD的装载机异步加载，并在JavaScript中用回调函数实现。所以，require的第二个参数就是回调函数，这部分内的代码使得模块能够被运用。回调函数的参数是调用的模块，按照require的顺序实现。参数的名字可以任意制定，但为了一致性和可读性起见，建议按照你请求的模块来实现。

另外AMD异步加载会一次性加载所有需要的模块，所以只要加载你需要的就可以了。

附：Place()函数是一个非常有用的DOM结点函数，它可以被用来放置已经存在的结点、新的结点到任何位置。它将所有需要的代码封装起来用于操作结点，并且考虑了跨浏览器问题。Place返回一个node结点。考虑到HTML片段，它只返回一个根结点，注意nodetype是1的会返回单个结点，nodetype是11的会返回一个代码片段，但是注意它是结点（Node）不是元素（Element），不提供Style InnerHTML等其他属性的函数。

2、定义AMD模块

这里要学习如何自定义加载模块，在定义加载自己的模块之前需要确保从HTTP服务器加载HTML文件（localhost就可以，但需要一个HTTP服务器，因为存在安全细微之处，会使得“文件：///”协议无法加载，这个主要是针对chrome）。如何自定义示例请看demo/ myModule.js 里面的注释解释了步骤。

AMD的define函数与require函数类似-模块ID和一个回调函数。AMD加载器中存储了模块的返回值，当其他的require或者define模块请求时，就会得到它的返回值。

注：函数的返回值可以通过F12查看，参照示例example1-2.html

3、CDN的用法

当加载CDN时需要一些额外的配置（详细的需要参考Advanced AMD和Using Modules with a CDN两个教程）。

请参考示例Example1-3.html，通过示例我们可以看到，除了给dojo增加配置，还重新定义了代码，它现在只加载demo/myModule部分，利用它能够完成页面上的文本操作。正如你所看到的，定义和加载模块是非常简单的。我们还将网址更改为dojo.js以省略协议，这将创建一个链接，使用该网页使用的任何协议（http或https），防止混合内容在某些浏览器中引发安全警告。

在AMD模块中组织代码，允许你创建模块化JavaScript源在浏览器中立刻执行，并且易于调试好。AMD模块变量使用本地作用域，避免混淆全局命名空间，并提供更快的名称解析。AMD是具有多个实现的标准规范，因此你不会被锁定到任何单个实现中-AMD模块可以与任何AMD加载器一起使用。

注：We've also changed the URL to dojo.js to omit the protocol (line 26) - this creates alink that uses whatever protocol the page is using (http or https), preventingmixed content which raises security warnings in some browsers.这句我也不太理解，翻译在前面，应该是它做了这个工作避免了混合内容引发浏览器安全警告。

4、等待DOM结点加载

请确认在你的Web应用开始运行代码之前你的DOM结点已经加载完毕，这是通过一个AMD特殊模块“插件(plugin)”实现的。插件可以被要求像其它的模块，其特殊功能仅通过在模块标识符的末尾添加感叹号（bang）的模块标识符来激活。在DOMready事件中，dojo提供了dojo/domReady插件，把它加进任何require或者define中在dom加载之后你的代码才会执行。