Dojo AMD

Created: November-22, 2018

在下一个示例中，让我们使用 Dojo 功能并了解 AMD（异步模块定义）的含义。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
            data-dojo-config="async: true"></script>

    <script>
        require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
            domConstruct.place('<em> Dojo!</em>', greetingNode);
        });
    </script>
</body>
</html>

与前一个示例的不同之处在于，有一个额外的脚本标记，在其中，使用的 dojo 特征很少。让我们看看他们中的每一个

要求在外行术语中，require 类似于导入或使用导入一些 OOTB 库的其他语言中的语句（在 dojo 中，你将其称为模块）。使用关键字 require 加载现有模块，并使用关键字 define 创建新模块。我们将在后面的部分中了解有关模块的更多信息。对于这个例子，我们使用了两个 OOTB 模块’dojo / dom’和’dojo / dom-construct’。dojo / dom(dom) 是核心 DOM（文档对象模型），可用于从 html 获取节点。对于 javascript 开发人员，它实际上类似于 document.getElementById（’’），内部 dojo 使用相同的方法。dojo / dom-construct(domConstruct) 用于创建 div，li，ul 等节点。它是 DOM 构造 API，它还可用于在任何位置将节点插入 DOM。比方说，你有一个 div’abc’并且想要创建另一个 div’xyz’并将它放在’abc’之后。你可以做到这一点

domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");

回到我们的例子，我们有

require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
        domConstruct.place('<em> Dojo!</em>', greetingNode);
        });

在函数中，你看到 dom 和 domConstruct。这就是我们对 dojo / dom 和 dojo / dom-construct 的反应。你可以使用任何你想要的命名约定

require([
                'dojo/dom',
                'dojo/dom-construct'
            ], function (hi, bye) {
                var greetingNode = hi.byId('greeting');
                bye.place('<em> Dojo!</em>', greetingNode);
            });

但是，对于 dojo / dom 使用 dom 和 dojo / dom-construct，用户 domConstruct 等有意义的名称，这是一个很好的做法。

现在在功能范围内，我们有

var greetingNode = hi.byId('greeting');

这样做的是它用 id =‘greeting’搜索 dom（在这种情况下为 div）。变量 greetingNode，将具有实际的 dom 节点。然后我们有，

domConstruct.place('<em> Dojo!</em>', greetingNode);

所以在这里，我们追加 Dojo！到节点 greetingNode。这就像 Hello + Dojo！输出将是 Hello Dojo！

因此，我们了解到了这一点

如何使用 dojo 功能
如何使用 OOTB 模块
如何操作 dom