Javascriptモジュラープログラミング(1)モジュール作成のベストプラクティス_基礎知識

Web サイトが徐々に「インターネット アプリケーション」になるにつれて、Web ページに埋め込まれた Javascript コードはより大きく、より複雑になります。

Web ページはますますデスクトップ プログラムに似てきており、チームの分業とコラボレーション、進捗管理、単体テストなどが必要になります...開発者はビジネスを管理するためにソフトウェア エンジニアリング手法を使用する必要がありますWeb ページのロジック。

JavaScript のモジュール型プログラミングが緊急のニーズになっています。理想的には、開発者はコア ビジネス ロジックを実装するだけで済み、他のモジュールは他の人がロードできるようになります。

ただし、JavaScript はモジュール型プログラミング言語ではなく、「モジュール」はおろか「クラス」もサポートしません。 (開発中の ECMAScript 標準の第 6 版では、「クラス」と「モジュール」が正式にサポートされる予定ですが、実用化には長い時間がかかります。)

JavaScript コミュニティは、既存の環境を改善するために多大な努力を払ってきました。 実行環境では、「モジュール」の効果が実現されます。この記事では、「JavaScript モジュール型プログラミング」の現在のベスト プラクティスを要約し、それらを実践する方法について説明します。これは入門チュートリアルではありませんが、JavaScript の基本的な構文を少し理解していれば理解できます。

1. 原文
モジュールとは、特定の機能を実装するためのメソッドのセットです。
さまざまな関数 (および状態を記録する変数) を単純に組み合わせる限り、それはモジュールになります。

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

Function m1(){
/ /.. .
}
Function m2(){
//...
}

上記の関数 m1() と m2() はモジュールを構成します。使用する場合は直接呼び出してください。
このアプローチの欠点は明らかです。グローバル変数を「汚染」し、変数名が他のモジュールと競合しないという保証がなく、モジュールのメンバー間に直接の関係がありません。
2. オブジェクトの記述
上記の欠点を解決するために、モジュールをオブジェクトとして記述し、すべてのモジュール メンバーをこのオブジェクトに配置することができます。

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

var module1 = new Object({
_count: 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
}) ;

上記の関数 m1() と m2() は module1 オブジェクトにカプセル化されています。使用すると、このオブジェクトのプロパティが呼び出されます。

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

module1.m1();

ただし、この書き方ではモジュールのメンバーがすべて公開されてしまい、内部状態が外部で上書きされる可能性があります。たとえば、外部コードは内部カウンターの値を直接変更できます。

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

module1._count = 5;

3. 即時実行関数の書き方
「即時呼び出し関数式 (IIFE)」を使用すると、プライベートメンバーを公開しないという目的を達成できます。

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

var module1 = (function(){

var _count = 0;
var m1 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})(); 内部 _count 変数。




コードをコピー

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

console.info(module1._count); //未定義
Module1はJavaScriptモジュールの基本的な書き方です。次に、この書き込みメソッドを処理していきます。
4. 増幅モード
モジュールが非常に大きく、複数の部分に分割する必要がある場合、または 1 つのモジュールが別のモジュールを継承する必要がある場合は、「拡張モード」を使用する必要があります。

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

var module1 = (function (mod){
mod.m3 = function () {
//...
}
return mod;

上記コードは module1 です。モジュールは新しいメソッド m3() を追加し、新しい module1 モジュールを返します。

5. Loose augmentation モード (Loose augmentation)
ブラウザ環境では、通常、モジュールの各部分がインターネットから取得されるため、どの部分が読み込まれるかがわからない場合があります。初め。前項の記述方法を採用した場合、最初に実行される部分で存在しない空のオブジェクトを読み込む可能性があり、その場合は「拡張モード」を使用する必要があります。

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

var module1 = ( function (mod){
//...
return mod; 「即時実行関数」のパラメータは空のオブジェクトでも構いません。

6. グローバル変数の入力

独立性はモジュールの重要な機能です。モジュール内のプログラムの他の部分と直接対話しないことが最善です。
モジュール内でグローバル変数を呼び出すには、他の変数を明示的にモジュールに入力する必要があります。


コードをコピー

コードは次のとおりです。 var module1 = (function ($, YAHOO) ) { //... })(jQuery, YAHOO);

上記の module1 モジュールは jQuery ライブラリと YUI ライブラリを使用する必要があるため、これら 2 つのライブラリ (実際には 2 つのモジュール) をパラメータとして入力し、「module1」と入力します。これにより、モジュールの独立性が確保されるだけでなく、モジュール間の依存関係も明確になります。

このシリーズの第 2 部では、ブラウザ環境でさまざまなモジュールを整理し、モジュール間の依存関係を管理する方法について説明します。
(終了)