当前位置 : 主页 > 网页制作 > Dojo >

Dojo菜鸟长成记

来源:互联网 收集:自由互联 发布时间:2021-06-15
在这里,你将学会如何加载Dojo,学习他的核心功能。你也会学习Dojo的异步模块定义,明白如何加载其他模块导你的网站或应用中,并且在出错时找到帮助。 入门开始: 如同使用其他
在这里,你将学会如何加载Dojo,学习他的核心功能。你也会学习Dojo的异步模块定义,明白如何加载其他模块导你的网站或应用中,并且在出错时找到帮助。
入门开始:

如同使用其他JavaScript文件一样,在使用Dojo时需要引用dojo.js脚本文件。Dojo可以用于流行的内容交互网络,现在,让我们在HtmlPage.html文件输入以下内容,并用浏览器打开:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Dojo之路</title>
    <script src="http://localhost/dojo-release-1.12.2/dojo/dojo.js" data-dojo-config="async:true"></script>
</head>
<body>
    <h1 id="greeting">现在我们开始学习:</h1>
    <script>
        require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
            domConstruct.place('<em> Dojo!</em>', greetingNode);
        });
    </script>
</body>
</html>
一般情况,一旦你加载了一个库的JavaScript文件,你可以使用它的所有方法。但Dojo模块化后,需要使用他的两个全局函数:require和define。require加载需要使用的模块,而define则可以定义自己的模块。需要注意一下,模块通常是单个的JavaScript源文件。
一些Dojo的HTML DOM操作的基本模块是dojo/dom和dojo/dom-construct。我们看看如何加载这些模块并使用它们提供的功能:
<script>
        require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
            domConstruct.place('<em> Dojo!</em>', greetingNode);
        });
 </script>
require函数的第一个参数是模块ID的数组- 要加载的模块的标识符。通常,这些标识符直接映射到文件名,如果您下载Dojo的源文件并查看dojo目录,您将看到模块文件dom.js和dom-construct.js。 异步模块定义(AMD- Asynchronous Module Definition)是异步运行,而Javascript异步操作是通过回调函数实现的,所以require的第二个参数是一个回调函数(参数与请求的模块顺序相同)。你可以随意命名回调函数的参数,但为了和模块一致和可读行,我建议使用模块的ID名称。 异步模块定义会自动加载模块的所以依赖模块,因此,在使用时只需要引用用到的模块就可以了,不必担心其他的依赖关系。
网友评论