2012-02-08 14 views
32

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

Dijitsを作成してスタイルを設定する必要があるメインページやDOM要素の作成など、比較的複雑なjavascriptアプリケーションの場合、私はTONを必要とするので、 AMDシステムの前にdojo名前空間で利用可能な別のモジュール(または、少なくとも23の異なるvarsに割り当てられていない)。

例:

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 
} 

私が働いているページのいずれかのモジュールのほんの数です。確かに、これらのメソッドにアクセスするためのより良い、将来のリリースではない方法があります。つまり、実際には全く新しいモジュールをインポートしてbyId()を使用する必要がありますか?さらにイベントをつなぐ別のものは?その上に、関数の引数リストに変数名を代入することによって作成されたすべての乱雑さは、そのようなバックステップのように見えます。

queryモジュールのように、必要なときにのみrequire()モジュールを使用すると思っていましたが、複数回必要な場合は、割り当てられている変数が範囲外である可能性がありますdomReady!またはreadyコールに入れてください。 reaalllly .... ??!

私はそれが私の道徳の理解の欠如だと仮定することができます。

私は本当に本を探して検索して購入しましたが、このライブラリは本当に私のお金のために走っています。私は誰でもこれを流すことができる光に感謝します。に全くばかげ

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 
     }) 
    }) 
} 

の編集道場ツールキットの人々からだけでなく、サードパーティのサイトの両方多くの例で使用され、この形式のオフに基づいて、それは次のようになり、私見、最初のfunction(ready, parser, style, registy...が長くなり、名前の衝突などで問題が発生するため、必要なすべてのモジュールをロードしてください。

スクリプトの実行中に必要なすべてのモジュールを起動するだけで私はばかげているようです。それは、私はいくつかの "パッケージマネージャ"スクリプトを見なければならないと言われています。しかし、この例では、選択した場所でクエリモジュールを使用する場合は、残りの部分をメインのrequire()ステートメントにロードする必要があります。なぜ私は理解していますが、一般的なドット構文の名前空間では何が悪いですか?何か? dijit.findIt()?なぜロードモジュール、一意の名前での参照、閉鎖を通過するのですか?

これは簡単な質問ですが、それが意味をなされることを願っています。 ..狂った私を運転本当に..

憤慨

は初心者くさい私を呼び出しますが、これは本当にです。私はそれがJavascript(明らかにそうではない)だが、うわーではない。私はこれを理解することができませんアウト!

ここに私が集まっているものがあります。いくつかのマスターページまたは任意で

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

:adder.jsできちんとrequire(['cg/adder'])形式が、何に従わない

require(['./js/cg/adder.js']) 

...。今は重要ではありません。

その後、adderを使用する必要があります:私が得た最も近いconsole.log(adder)3を返していました

console.log(adder.addTen(100)) // 110 

。うん3。それ以外の場合はadder is not definedです。

なぜこれは難しいのですか?私はこれに私のnoobカードを使用しています、なぜ私は実際に一緒に来ていないのか分かりません。

ありがとうございます。

+0

あなたのフォローアップについて新しい質問をする必要があります。私たちに問題を示すのに十分なコードはありません(たとえば、「加算」を定義していないなど)。 – Domenic

+0

上記のサンプルに基づいて、1つのrequireステートメントでdijit/form/ValidationTextBoxとdojo/queryという2つのモジュールの依存関係のみが必要です。推移的な依存関係はあなたのために世話をします。 @Domenicの言葉のように、ここにもっとたくさんのものがあり、私たちはやり直すべきです。 – peller

+0

私はそうではありませんか?うーん、私はちょうどやり直すよ。みんなありがとう。乾杯 – Phix

答えて

20

依存アレイ形式:

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モバイルブラウザでは機能しませんが、うまくいけばうまくいきません。なぜこれを行う代わりに、オブジェクトを手動で名前空間をに関しては


は、@のペラの答えは良いモジュール性が良いことである理由の概要、およびAMDとモジュール性を達成するための方法として、モジュールシステムがある理由についてmy answer to a similar question会談を与えます良いこと。

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

+0

もう1つの楽しい事実 - AMDでは、あなたが依存しているコードは、あなたのモジュールがもはや参照されなくなったときに実際にガベージコレクションを得ることができます。これは、すべてがグローバルにつながっているときには起こりません。 – peller

+1

また、Dojoのローダーは非同期(非同期入出力を使用する)であることに注意してください。したがって、CJSが必要とする即時のCJS要求シグニチャー@Dominicをサポートしていますが、他のコードがモジュールをロードしていない。そのため、配列とコールバックを必要とする署名が必要です。 AMD依存性配列フォーマットが厄介なので、モジュールを非同期的に読み込むタスクを単純化するように設計されています。 CJSは、主にWebブラウザと同じ制限を受けていないサーバー側システム向けに設計されています。 – peller

+0

@peller FALSE。 Dojoや他のAMD準拠のローダーは 'Function.prototype.toString'を使用してファクトリ関数の本体を解析し、次に依存関係配列をアセンブルします。 – Domenic

12

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

とにかく、これはQ &の形式から逸脱しています。あなたは特定の質問をしたいかもしれません。

+0

情報ありがとうございます。私はrequirejsをもっと見て、これをハックし続けるつもりです。 *編集済みのオリジナル* – Phix

関連する問題