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