JavaScriptシリーズの徹底理解(3) モジュールmode_javascriptスキルの徹底分析

はじめに
モジュール モードは JavaScript プログラミングで非常に一般的なモードであり、この記事ではこのモードのより高度な使用法を誰もが知っています。
まず、モジュール パターンの基本的な機能を見てみましょう:
モジュール式、再利用可能
変数と関数をカプセル化し、グローバル namaspace と接触せず、疎結合です
利用可能なもののみを公開します他のすべてのプライベート メソッドは非表示になります。
モジュール モードに関しては、この概念は YUI のメンバーである Eric Miraglia によって 4 年前に初めて提案されました。簡単な例を使って基本的な使用法を説明します (既に使用している場合)。よく知っているので、このセクションは無視してください)。
基本的な使用法
最初に最も単純な実装を見てみましょう。コードは次のとおりです。

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

var Calculator = function (eq) {
//ここでプライベート メンバーを宣言できます
var eqCtl = document.getElementById(eq); >return {
// 公開メンバー
add: function (x, y) {
var val = x y;
eqCtl.innerHTML = val;
};


次の方法で呼び出すことができます:

コードをコピーします var calculator = new Calculator('eq');

calculator.add(2, 2);

使用するたびに新しいものにする必要があります。つまり、各インスタンスはメモリ内のコピーです。パラメータを渡す必要がない場合、または特別な厳しい要件がない場合は、最後の後に括弧を追加できます。自己実行の目的を達成するため、メモリ内にはインスタンスのコピーが 1 つだけ存在しますが、その利点を示す前に、このモードの基本的な使用法を見てみましょう。
匿名クロージャ

匿名クロージャはあらゆることを可能にする基盤であり、これは JavaScript の最も優れた機能でもあります。関数内のコードは常にクロージャ内に存在します。サイクルの実行中、このクロージャは内部コードがプライベート状態であることを保証します。

コードをコピー コードは次のとおりです。 (function () {

/ / .. . すべての変数と関数はここで宣言されており、スコープはこの匿名クロージャ内にのみ存在できます

// ...ただし、ここのコードは引き続き外部グローバル オブジェクトにアクセスできます
}()); >

匿名関数の後の括弧は JavaScript 言語で必要であることに注意してください。これを宣言しない場合、JavaScript インタプリタはデフォルトで関数を宣言します。括弧がある場合は関数が作成されます。もちろん、これを使用する場合は、上記のように new を使用する必要はありません:
(function () {/* 内部コード*) /})();
ただし、関数の自己実行については、後ほど詳しく説明するので、最初の方法を使用することをお勧めします。

グローバル変数の参照
JavaScript には、変数が使用されているかどうかに関係なく、変数全体の var 宣言を見つけるためにスコープ チェーンを逆にたどる機能があります。 var is not found, Explain インタープリタは、変数が代入演算に使用される場合、以前に存在しなかった場合、自動的に変数を作成します。これは、使用が非常に簡単であることを意味します。あるいは、匿名クロージャでグローバル変数を作成することもできますが、さらに難しいのは、特にコードを読む人がどの変数がグローバルでどの変数がローカルであるかを多くの区別で認識する場合、コードの管理が難しいことです。
しかし、幸いなことに、匿名関数でグローバル変数をパラメータとして渡して、それを使用することができます。例を見てみましょう。 :




コードをコピー

コードは次のとおりです: (function ($, YAHOO ) { // ここで、私たちのコードはグローバル jQuery オブジェクトを使用できます。YAHOO も同様です。

} (jQuery, YAHOO));

現在、そのようなクラス ライブラリが多数あります。 jQuery ソース コードなどの使用方法。
しかし、場合によっては、グローバル変数を使用するだけでなく、グローバル変数を宣言したい場合もあります。このグローバル変数は、基本的なモジュール モードである匿名関数の戻り値を通じて返すことができます。完全なコードを見てみましょう:

コードをコピー

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

var blogModule = (function () {
var my = {}, privateName = "ブログパーク";
function privateAddTopic(data) {
//内部処理コードは次のとおりです
}
my.Name = privateName;
my.AddTopic = function (data) {
privateAddTopic(data);
return my; ) ;


上記のコードは、blogModule.AddTopic と blogModule.Name という 2 つのアクセス可能なプロパティを持つグローバル変数 blogModule を宣言します。また、他のコードは匿名関数内にあります。同時に、上記のグローバル変数を渡す例に従って、他のグローバル変数も簡単に渡すことができます。

高度な使用法
ほとんどのユーザーにとって上記の内容で十分ですが、このパターンに基づいて、より強力で拡張しやすい構造を拡張することもできます。一つずつ見ていきましょう。
拡張機能
モジュール モードの制限の 1 つは、すべてのコードを 1 つのファイルに記述する必要があることですが、一部の大規模なプロジェクトでは、複数のファイルで簡単に開発できるため、関数を複数のファイルに分割することが非常に重要です。人々。 。上記のグローバル パラメーターのインポート例を振り返ると、blogModule 自体を渡すことができるでしょうか?答えは「はい」です。最初に blogModule を渡し、関数属性を追加して、それを返して上記のコードを実行します。

コードをコピーします。 🎜> コードは次のとおりです。 var blogModule = (function (my) {

my.AddPhoto = function () {

//内部を追加code
};
return my;
} (blogModule));


このコードは C# の拡張メソッドのように見えますか?多少似ていますが、本質的には異なります。同時に、var は必要ありませんが、一貫性を確保するために再度使用します。同時に、匿名関数内のコードはプライバシーと内部状態を確保します。
疎結合拡張子

上記のコードは実行できますが、最初に blogModule を宣言してから上記の拡張子コードを実行する必要があります。これは、手順を間違えることができないことを意味します。
var cnblogs = cnblogs || {};
これは、cnblogs オブジェクトが存在する場合は直接使用され、存在しない場合は直接使用されるようにするためです。 {} では、この機能を使用してモジュール モードで読み込み順序を実装する方法を見てみましょう:

コードをコピー コードは次のとおりです。 : var blogModule = (function (my) {

// いくつかの関数を追加

return my;
} (blogModule || {})); 🎜>
このコードでは、各ファイルがこの構造を保証しており、任意の順序でロードできるため、この時点で var を宣言する必要があります。宣言されていないと、他のファイルが Can't get を読み取ってしまいます。それ。
密結合拡張機能
疎結合拡張機能は優れていますが、一部のプロパティや関数を書き換えることができない場合や、初期化中にモジュールのプロパティを使用できない場合があります。密結合された拡張機能は読み込み順序を制限しますが、オーバーロードする機会を提供します。次の例を参照してください。

コードをコピー

コード var blogModule = (function (my) { var oldAddPhotoMethod = my.AddPhoto; my.AddPhoto = function () {

// オーバーロードされたメソッド、まだ利用可能です oldAddPhotoMethod

} を介して古いメソッドを呼び出します。
return my;
} (blogModule)); このようにして、オーバーロードの目的を達成します。もちろん、元のプロパティを内部的に引き続き使用したい場合は、oldAddPhotoMethod を呼び出して使用できます。
クローンと継承




コードをコピー

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

var blogModule = (function ( old) { var my = {}, key; for (key in old) { if (old.hasOwnProperty(key)) { my[key] = old[ key];

}

}
var oldAddPhotoMethod = old.AddPhoto;
my.AddPhoto = function () {
// クローン作成後、もちろん、引き続き oldAddPhotoMethod
}
return my
} (blogModule); と呼ぶこともできます。
このメソッドは柔軟ですが、柔軟性も必要です。実際、属性オブジェクトやオブジェクトの関数はまったくコピーされず、同じオブジェクトへの参照がもう 1 つあるだけなので、古いオブジェクトがそれを変更すると、クローンされたオブジェクトが所有する属性または関数も変更されます。この問題を解決するには再帰を使用する必要がありますが、関数の割り当てに再帰を使用するのは簡単ではないため、関数を再帰するときにそれに応じて評価します。何があっても、この記事にこの方法を載せておきますので、皆さんも使用する際には注意してください。
ファイル間でプライベート オブジェクトを共有する
上記の例を通じて、モジュールが複数のファイルに分割されている場合、各ファイルは同じ構造、つまり、匿名関数内のプライベート オブジェクトを保証する必要があることがわかります。各ファイルは相互アクセスできないので、使用する必要がある場合はどうすればよいでしょうか? まずコードの一部を見てみましょう:

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

var blogModule = (function ( my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my ._private;
my._seal を削除;
my._unseal を削除
},
_unseal = my._unseal || ;
my._seal = _unseal;

} (ブログモジュール || {}); 🎜>どのファイルでもローカル変数 _private に属性を設定し、その設定は他のファイルにすぐに有効になります。このモジュールがロードされると、アプリケーションは blogModule._seal() を呼び出してモジュールを「ロック」し、内部の _private への外部アクセスを防ぎます。このモジュールを再生成する必要がある場合、アプリケーションのライフサイクル中のファイルは _unseal() を呼び出して「ロック解除」し、新しいファイルをロードできます。ロード後、_seal() を再度呼び出して「ロック」します。
サブモジュール
最後で簡単な使用方法は、サブモジュールを作成することです

コードをコピーします

コードは次のとおりです以下のように: blogModule.CommentSubModule = (function () { var my = {}; // ... return my;

} () );

非常に簡単ですが、サブモジュールにも一般的なモジュールの高度な使用方法がすべて備わっており、どのサブモジュールでも再度使用できることを説明したいために入れました。上記の方法。
概要
上記のメソッドのほとんどは、相互に組み合わせて使用​​できます。一般に、システムを設計する場合は、疎結合拡張機能、プライベート ステート、サブモジュールなどのメソッドを使用できます。さらに、ここではパフォーマンスの問題については言及しませんでしたが、モジュール モードは効率的で、コードが少なく、読み込み速度が速いと思います。疎結合拡張機能を使用すると、並列読み込みが可能になり、ダウンロード速度が向上します。初期化時間は遅くなる可能性がありますが、適切なパターンを使用する価値があります。
参考記事：
http://yuiblog.com/blog/2007/06/12/module-pattern/

http://www.adequatelygood.com/2010/3/JavaScript-Module- Pattern-In-Depth
同期と推奨事項
この記事はディレクトリ インデックスに同期されています: JavaScript シリーズの詳細な理解
オリジナル、翻訳、再版を含む JavaScript シリーズの記事の詳細な理解などの記事が役に立ちましたら、おじさんが書くモチベーションを高めるために、お勧めしてサポートしてください。