Javascriptモジュールパターン分析_JavaScriptスキル

Douglas Crockford は、このルールを実装する便利なシングルトン パターンを教えてくれました。彼のパターンは YUI ベースのアプリケーションにとって有益であると思います。ダグラス氏はこれをモジュール パターンと呼んでいます。これは次のように動作します。

ネームスペース オブジェクトを作成します。 YUI を使用している場合は、YAHOO.namespace() メソッドを使用できます。 これにより、空の myProject オブジェクトが割り当てられます。 YAHOO のメンバー (myProject がすでに存在する場合、上書きされません)。これで、YAHOO.myProject のメンバーの追加を開始できます。
匿名関数の戻り値を名前空間オブジェクトに割り当てます。
YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "私は YAHOO.myProject.myModule.myPublicProperty と呼ばれます。アクセスされました。 ";
myPublicMethod: function () {
YAHOO.log("YAHOO.myProject.myModule.myPublicMethod としてアクセスされました。");
}
};
}( ; myPublicMethod のオブジェクト。この匿名関数が返されるとすぐに、返されたオブジェクトは YAHOO.myProject.myModule としてアクセスされます。

匿名関数では、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 としてアクセスできます。"
myPublicMethod: function () {
YAHOO.log("YAHOO.myProject.myModule.myPublicMethod としてアクセスできます。" );
//myProject ではプライベート変数とメソッドにアクセスできます
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 つのプライベート変数は破棄されません。

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






1 点

• 2 点


3 点items 項目

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

[1]原文: 「JavaScript モジュール パターン」。これは YUI ブログにあります。場所によっては公開されていない場合があります。英語の転載を検索するか、検索エンジンのキャッシュを使用してご覧ください。

[2] 「A JavaScript Module Pattern - JavaScript のモジュール パターン」 これは他の人の翻訳ですが、非常に読みにくいと感じます。理由の 1 つは、もちろん主な理由ですが、この記事が YUI を学習するための最も基本的な記事であり、YUI モジュール モデル全体がこれに基づいているためです。​