dojo => こんにちは道場

前書き

他のプログラミング言語のHello Worldのような単純なHello Dojo。 Dojoはインストール/構成と使用が簡単です。 http://dojotoolkit.org/download/からDojoの最新バージョンをダウンロードするか、プロジェクトで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>

前の例との違いは、余分なスクリプトタグがあり、その中に使用されている道場の特徴がほとんどないということです。それぞれを見てみましょう

require必要な場合 、requireは、OOTBライブラリをインポートする（dojoでモジュールと呼ぶ）他の言語のステートメントのインポートや使用に似ています。既存のモジュールはキーワード 'require'を使用してロードされ、新しいモジュールはキーワード 'define'を使用して作成されます。モジュールの詳細については、後のセクションで学習します。この例では、2つのOOTBモジュール「dojo / dom」と「dojo / dom-construct」を使用しています。 dojo / dom（dom）は、htmlからノードを取得するために使用できるコアDOM（ドキュメントオブジェクトモデル）です。 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の操作方法

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

dojo
こんにちは道場

サーチ…

前書き

こんにちは世界

Dojo AMD