dojo => Привет, Dojo

Вступление

Простой Hello Dojo, как Hello World, на других языках программирования. Dojo прост в установке, настройке и использовании. Вы можете загрузить последнюю версию Dojo с сайта http://dojotoolkit.org/download/, или вы можете использовать то, что называется CDN в вашем проекте. Я предпочитаю загружать и использовать его. Последняя версия во время этой темы - 1.12.1, и работа над Dojo 2.0 продолжается.

Привет, мир

Создайте HTML-файл, как показано ниже. В теге скрипта вы можете использовать ссылку CDN или от своего локального

<script type="text/javascript" src="dojo/dojo/dojo.js"
        data-dojo-config="async:true">

<!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>
</body>
</html>

Вот и все. Когда вы запустите этот HTML-код, вы должны увидеть Hello. Да, в этом примере нам еще предстоит использовать любой специальный код Dojo. Но это показывает, как вы можете создать простую страницу с помощью Dojo. Затем мы увидим, как мы можем применить Dojo к этой простой странице.

Dojo AMD

В следующем примере давайте использовать функции 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 (в додзё вы называете их модулями). Существующие модули загружаются с использованием ключевого слова «require», а новые модули создаются с использованием ключевого слова «define». Мы узнаем больше о модулях в следующем разделе. Для этого примера мы использовали два модуля OOTB «dojo / dom» и «dojo / dom-construct». dojo / dom (dom) - это основная DOM (объектная модель документа), которая может использоваться для получения узла из html. Для разработчиков javascript он похож на document.getElementById (''), а внутри dojo использует тот же метод. dojo / dom-construct (domConstruct) используется для создания таких узлов, как div, li, ul и т. д. Это API-интерфейс построения DOM, и его также можно использовать для вставки узла в 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 use dom и для dojo / dom-construct, user domConstruct.

Теперь в рамках функции мы имеем

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

Это делает то, что он ищет a dom (div в этом случае) с id = 'greeting'. переменной greetingNode, будет иметь фактический dom-узел. Тогда мы имеем,

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

Итак, мы добавляем Dojo! к узлу greetingNode. Это похоже на Hello + Dojo! и выход будет Hello Dojo!

Таким образом, мы узнали

Как использовать функции dojo
Как использовать модули OOTB
Как манипулировать dom

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

dojo
Привет, Dojo

Поиск…

Вступление

Привет, мир

Dojo AMD