web-dev-qa-db-ja.com

Dojo require（）およびAMD（1.7）

私はDojoと新しいAMD構造に移行するのに大変な時間を費やしています。そして、誰かがコンセプト全体に光を当てることができることを本当に望んでいます。私はここ数週間Googleに住んでいて、使用法ではなく、これを使用する際の構造とデザインパターンの傾向に関する情報を見つけようとしています。

Dijitsを作成してスタイルを設定する必要があるメインページ、DOM要素を作成するなど、比較的複雑なjavascriptアプリケーションの場合、必要なため、さまざまなモジュールのTONを使用する必要があるのは奇妙だと思います。それ以外の場合は、AMDシステムの前のdojo名前空間で使用できます（または、少なくとも23の異なる変数に割り当てられていません）。

例：

_require(['dijit/form/ValidationTextBox', 'dijit/form/SimpleTextarea', 'dijit/form/CheckBox', 'dijit/Dialog', 'dijit/form/Form'])
require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], 
function(ready, parser, style, registry, dom, event, construct){
    //...etc
}
_

これは、私が取り組んでいるページの1つのモジュールのほんの一部です。確かに、これらのメソッドなどにアクセスするための、より優れた、将来のリリースではない方法があります。つまり、byId()を使用するには、まったく新しいモジュールをインポートする必要がありますか？そして、イベントを接続するためのさらに別の？その上、関数の引数リストで変数名を割り当ててしがみつくことによって作成されるすべての混乱は、まさにそのようなバックステップのように思えます。

queryモジュールなど、必要な場合にのみモジュールをrequire()すると思いましたが、複数回必要な場合は、割り当てられている変数が範囲外である可能性があります。 、そしてそれを_domReady!_またはready呼び出しに入れる必要があります。 本当に.... ??！

だから道場の理解不足だとしか思えない。

私は実際に本を探して検索し、購入しました（AMD以前のものですが）が、このライブラリは本当に私のお金のために私に実行を与えています。誰もがこれに当てることができる光に感謝します。

例を編集

_require(['dijit/form/ValidationTextBox'])
require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], function(ready, parser, style, registry, dom, event, construct){
    /* perform some tasks */
    var _name = new dijit.form.ValidationTextBox({
        propercase : true,
        tooltipPosition : ['above', 'after']
    }, 'name')

    /*
    Let's say I want to use the query module in some places, i.e. here.
    */
    require(['dojo/query', 'dojo/dom-attr'], function(query, attr){
        query('#list li').forEach(function(li){
            // do something with these
        })
    })
}
_

Dojoツールキットの人々とサードパーティのサイトの両方からの多くの例で使用されているこのフォーマットに基づいて、最初の_function(ready, parser, style, registy..._が長くなるので、必要なすべてのモジュールをロードすることは絶対にばかげています。それ以上になり、名前の衝突などで問題が発生します。

スクリプトの存続期間中に必要となるすべてのモジュールを起動してrequire()することは、私にはばかげているように思えます。そうは言っても、私はいくつかの「パッケージマネージャー」スクリプトを見る必要があります。ただし、この例では、クエリモジュールを特定の場所で使用する場合は、メインのrequire()ステートメントに残りの部分をロードする必要があります。理由はある程度理解できますが、一般的なドット構文の名前空間の何がそれほど悪いのでしょうか。 dojo.whatever？ dijit.findIt（）？なぜモジュールをロードし、一意の名前で参照し、クロージャーを通過するのですか？

これがもっと簡単な質問だったらいいのにと思いますが、それが理にかなっていることを願っています。

苛立ち

私を初心者と呼んでください、しかしこれは本当に..本当に..私を怒らせます。 Javascriptに関しては（どうやらそうではないようですが）私は初心者ではありませんが、すごいです。わからない！

これが私が集めているものです。 adder.jsの場合：

_define('adder', function(require, exports){
    exports.addTen = function(x){
        return x + 10
    }
})
_

マスターページなどで：

_require(['./js/cg/adder.js'])
_

...これはきちんとしたrequire(['cg/adder'])形式には従いませんが、何でもです。今は重要ではありません。

次に、adderの使用は次のようになります。

_console.log(adder.addTen(100)) // 110
_

私が得た最も近いものはconsole.log(adder)で、_3_を返しました。うん。 _3_。それ以外の場合は、_adder is not defined_です。

なぜこれはそれほど難しい必要があるのですか？私はこれにnoobカードを使用しています。なぜなら、なぜこれが一緒にならないのか本当にわからないからです。

みんなありがとう。

javascriptdata-structuresdojojs-amd
32
Phix

依存関係の配列形式：

define(["a", "b", "c"], function (a, b, c) {
});

確かに迷惑でエラーが発生しやすい可能性があります。配列エントリを関数パラメータに一致させるのは非常に困難です。

require形式が好きです（ "Simplified CommonJS Wrapper" ）：

define(function (require) {
    var a = require("a");
    var b = require("b");
    var c = require("c");
});

これにより、行が短くなり、2か所で変更することを忘れずに行を再配置/削除/追加できます。

後者の形式はPS3以前のOperaモバイルブラウザでは機能しませんが、気にしないでください。

オブジェクトを手動で名前空間化する代わりにこれを行う理由については、@ pellerの回答は、モジュール性が優れている理由の概要を示しています。 同様の質問に対する私の回答 AMDとモジュールシステムが方法として使用されている理由について説明しています。モジュール性を実現することは良いことです。

@pellerの答えに追加する唯一のことは、「依存関係に注意を払うことで、実際にははるかに優れたコードが作成される」ということです。モジュールに必要な他のモジュールが多すぎる場合、それは悪い兆候です。 72K LOC JavaScriptコードベースには、モジュールの長さを最大100行にし、0から4の依存関係を必要とするという緩いルールがあります。それは私たちによく役立っています。

20
Domenic

requirejs.org は、AMDとは何か、AMDを使用する理由の概要を示しています。はい、Dojoは、個別に参照する小さなモジュールに移行しています。その結果、ロードするコードが少なくなり、そのコードへの参照が明示的になります。依存関係に注意を払うことは、実際にははるかに優れたコードになると思います。 AMDは最適化を可能にし、移行が完了すると、すべてをグローバルにロードする必要がなくなります。これ以上の衝突はありません！ require（）ブロックは、さまざまなモジュールを使用するコードをラップします。 domReady！ DOMのロードに関連し、スコープ内にある変数とは何の関係もありません。

とにかく、これはSOのQ＆A形式から逸脱しています。特定の質問をすることをお勧めします。

12
peller