JavaScript モジュラープログラミング (1): モジュールの書き方-jsチュートリアル-php.cn

JavaScript モジュラープログラミング (1): モジュールの書き方

黄舟

リリース： 2017-03-02 15:14:58

オリジナル

1535 人が閲覧しました

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(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

ログイン後にコピー

上記の書き方では、外部コードから内部の_count変数を読み取ることができません。

console.info(module1._count); //undefined

ログイン後にコピー

module1 は Javascript モジュールを作成する基本的な方法です。次に、この書き込みメソッドを処理していきます。

4. 増幅モード

モジュールが非常に大きく、複数の部分に分割する必要がある場合、または 1 つのモジュールが別のモジュールを継承する必要がある場合は、「拡張モード」を使用する必要があります。

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

ログイン後にコピー

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

5. Loose augmentation モード (Loose augmentation)

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

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

ログイン後にコピー

「拡大モード」と比較して、「ワイド拡大モード」は「即時実行機能」のパラメータが空のオブジェクトであってもよいことを意味します。

6. 入力グローバル変数

独立性はモジュールの重要な機能です。モジュール内のプログラムの他の部分と直接対話しないことが最善です。

モジュール内でグローバル変数を呼び出すには、他の変数を明示的にモジュールに入力する必要があります。

　　var module1 = (function ($, YAHOO) {
　　　　//...
　　})(jQuery, YAHOO);

ログイン後にコピー

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

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

上記は JavaScript モジュラープログラミング (1): モジュールの書き方の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。