Javascript_javascriptスキルのモジュールモード

Douglas Crockford は、このルールを実装する便利なシングルトン パターンを教えてくれました。彼のパターンは YUI ベースのアプリケーションにとって有益であると思います。ダグラス氏はこれをモジュール パターンと呼んでいます。次のように動作します。
1. 名前空間オブジェクトを作成します。YUI を使用する場合は、YAHOO.namespace() メソッドを使用できます。これにより、空の myProject オブジェクトが割り当てられます。 YAHOO のメンバー (myProject がすでに存在する場合は上書きされません)。これで、YAHOO.myProject のメンバーの追加を開始できます。
2. 名前空間オブジェクトに匿名関数の戻り値を割り当てます。

コードをコピーします コードは次のとおりです。 🎜>

YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "YAHOO.myProject.myModule.myPublicProperty としてアクセスされます。";
myPublicMethod: function ( ) {
YAHOO.log("YAHOO.myProject.myModule.myPublicMethod としてアクセスされました。");
}
}();


右中かっこの後に括弧 () が続いている最後の行に注意してください。この表記により、匿名関数が即座に実行され、myPublicProperty と myPublicMethod を含むオブジェクトが返されます。この匿名関数が返されるとすぐに、返されたオブジェクトは YAHOO.myProject.myModule としてアクセスされます。

3. 匿名関数で、return ステートメントの前に「プライベート」メソッドと変数を追加します。ここまでは、myPublicProperty と myPublicMethod を YAHOO.myProject.myModule に直接割り当てただけです。さらに、このパターンでは、return ステートメントの前にコードを配置すると、実用性が高まります。

コードをコピー コードは次のとおりです。

YAHOO.myProject.myModule = function () {

//"プライベート" 変数:
var myPrivateVar = "YAHOO.myProject.myModule 内でのみアクセスできます。";
//プライベート メソッド:
var myPrivateMethod = function () {
YAHOO.log("YAHOO.myProject.myModule 内でのみアクセスできます。");
}

return {
myPublicProperty: "YAHOO.myProject としてアクセスできます。 myModule.myPublicProperty Accessed. "
myPublicMethod: function () {
YAHOO.log("YAHOO.myProject.myModule.myPublicMethod としてアクセスできます。");
//myProject では、アクセスできますprivate 変数とメソッド
YAHOO.log(myPrivateVar);
YAHOO.log(myPrivateMethod())
//myPublicMethod のネイティブ スコープは myProject であり、パブリック メンバーにアクセスするために "this" を使用できます。 。
YAHOO.log(this.myPublicProperty);
}
}();


上記のコードでは、匿名関数から戻ります。メンバー2人で。 YAHOO.myProject.myModule 内では、それぞれ this.myPublicProperty と this.myPublicMethod を使用してアクセスできます。 YAHOO.myProject.myModule の外部では、YAHOO.myProject.myModule.myPublicProperty および YAHOO.myProject.myModule.myPublicMethod を使用してパブリック メンバーにアクセスできます。
プライベート変数 myPrivateProperty および myPrivateMethod には、匿名関数自体、または返されたオブジェクトのメンバーのみがアクセスできます。匿名関数は実行されてすぐに終了しますが、クロージャの力によって依然として保持されます。これは、関数に対してローカルな変数が関数が戻った後も保持されるというルールです。 YAHOO.myProject.myModule が必要とする限り、2 つのプライベート変数は破棄されません。

4. このモデルを練習します。このパターンの一般的な適用例を見てみましょう。リストがあり、リスト上のいくつかの項目をドラッグできるとします。ドラッグが適用される項目にはドラッグ CSS クラスがあります。

コードをコピー コードは次のとおりです:

• 1 つのアイテム < /li>
  
• 2 つのアイテム


• 3 つのアイテム
;

<script> <br>YAHOO.myProject.myModule = function () { <br>// のプライベート短縮参照YUI ユーティリティ: <br>var yue = YAHOO.util.Event, <br>yud = YAHOO.util.Dom; <br>//プライベート メソッド <br>var getListItems = function () { <br>//ここでは、「yud」YAHOO.util.Dom の省略形など、他のプライベート変数が使用されます。 <br>var elList = yud.get("myList"); <br>var aListItems = yud.getElementsByClassName( <br>"draggable) ", //CSS クラスの項目のみを取得します。 "draggable"<br>"li", //リスト項目のみを返します<br>elList //検索を変更された要素の子要素に限定します<br>); <br> return aListItems; <br>}; <br>//返されたオブジェクトは YAHOO.myProject.myModule: <br>return { <br>aDragObjects: [], //外部からアクセス可能なストレージ DD オブジェクト <br>init: function () { <br>//DOM が完全にロードされるまで、リスト項目はドラッグできません: <br>yue.onDOMReady(this.makeLIsDraggable, this, true); <br>}, <br>makeLIsDraggable: function () { <br>var aListItems = getListItems(); //ドラッグできる要素<br> (var i=0, j=aListItems.length; i<j; i ) { <br>this.aDragObjects .push(new YAHOO.util.DD(aListItems[i])); <br>} <br>} <br>}(); 上記のコードは実行されました。 init メソッドにすぐにアクセスできます: <br>YAHOO.myProject.myModule.init(); <br></script>


これは、意図的に詳細に示した例です。この方法でやれば、間違いなくよりコンパクトにできるでしょう。このパターンは、プロジェクトがより複雑になり、API が増加するにつれて、適切に拡張できます。このようにして、グローバル名前空間を回避し、外部からアクセス可能な API メソッドを提供し、保護されたまたは「プライベート」データとメソッドをサポートします。

[1]原文:
《JavaScriptモジュールパターン》

。これは YUI ブログにあります。場所によっては公開されていない場合があります。英語の転載を検索するか、検索エンジンのキャッシュを使用してご覧ください。
• [2]「A JavaScript Module Pattern – JavaScript のモジュール パターン」
• これは他の人の翻訳ですが、読むのに不便なようです。この記事の理由は、もちろん、この記事が YUI を学習するための最も基本的な記事であるためです。YUI モジュール モデル全体がこれに基づいています。
• 元のアドレス: http://dancewithnet.com/2007/12/04/a-javascript-module-pattern/