バックエンド プログラマ向けの JS モジュールの使用手順

今回は、バックエンド プログラマー向けに JS モジュール化を使用するための手順をお届けします。バックエンド プログラマーが JS モジュール化を使用する際の 注意事項 について、実際のケースを見てみましょう。

基本モード

匿名クロージャ

匿名クロージャは非常に一般的なコード分離メソッドであり、匿名オブジェクトを宣言して即座に実行します。 匿名関数内で宣言された変数とメソッド、および匿名関数自体は関数の外部を汚染しません。同時に、匿名関数の呼び出しはクロージャを形成するため、関数の外部で宣言された変数とメソッドが生成されます。 関数内でを使用できます。

(function () {    // ... all vars and functions are in this scope only
    // still maintains access to all globals}());

グローバル インポート

JavaScript グローバル 変数 のスコープは世界中で実行されるため、関数内でグローバル変数を使用したり、宣言したりすることもでき、コードの混乱や管理の困難を招きやすいことがわかっています。
グローバル インポート モードは、匿名クロージャの一種で、グローバル変数をインポートするためのパラメータを追加します。外部モジュールには、匿名関数内のインポートされたパラメータを介してのみアクセスできるため、モジュール間の依存関係が明確になり、管理が容易になります。

(function ($, YAHOO) { // このコードではグローバル jQuery (as $) と YAHOO にアクセスできるようになりました}(jQuery, YAHOO));

この規約では、関数本体内のグローバル変数へのアクセスを強制的に防ぐことはできません1 つの解決策は、すべてのモジュールをこの方法で処理し、モジュール自体をグローバル変数にエクスポートすることです。これにより、グローバル変数の使用を大幅に減らすことができます。

モジュールエクスポート

モジュールエクスポートは、匿名関数の即時実行の結果を返し、グローバル変数に代入します。匿名関数はオープン オブジェクトのみを返し、内部的に定義された変数と関数は依然として外部からは見えません。

var MODULE = (function () {    var my = {},
        privateVariable = 1;    function privateMethod() {        // ...
    }
    my.moduleProperty = 1;
    my.moduleMethod = function () {        // ...
    };    return my;
}());

アドバンスモード

拡張モード

JavaScriptオブジェクトはホット拡張をサポートしており、グローバルインポートモードと組み合わせることで、モジュールを拡張できます。

var MODULE = (function (my) {
    my.anotherMethod = function () {        // added method...
    };    return my;
}(MODULE));

このモードはMODULEが宣言されていることを前提とし、宣言されていない場合はエラーとなります。

ワイド拡張モード

ワイド拡張モードは、匿名関数を呼び出し、MODULE || をパラメータとして渡すトリックを使用して、MODULE が事前に宣言されていない場合に呼び出しエラーになる問題を解決します。このモードには、複数の拡張モードをブロックされることなく並行して呼び出すことができるという素晴らしい点も隠されています。

var MODULE = (function (my) {    // add capabilities...
    return my;
}(MODULE || {}));

タイト拡張モード

ワイド拡張モードは優れていますが、安全に処理できないメソッド属性をオーバーロードするという欠点があります。タイト拡張モードでは、古いメソッドへの参照が保持され、定義された新しいメソッドで古いメソッドの機能を柔軟に再利用できます。

var MODULE = (function (my) {    var old_moduleMethod = my.moduleMethod;
    my.moduleMethod = function () {        // method override, has access to old through old_moduleMethod...
    };    return my;
}(MODULE));

クローンと継承

var MODULE_TWO = (function (old) {    var my = {},
        key;    for (key in old) {        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }    var super_moduleMethod = old.moduleMethod;
    my.moduleMethod = function () {        // override method on the clone, access to super through super_moduleMethod
    };    return my;
}(MODULE));

クローン作成と継承モードは、元のモジュールへの影響が最も少ないモジュール再利用方法です。このモードは、古いモジュール属性の浅いクローン作成によって再利用され、タイトなモジュール属性と組み合わせることができます。 メソッドのオーバーロード の質問を処理するための拡張モード。これは一種のシャロー クローン作成であることに注意してください。古いモジュールの属性がオブジェクトである場合、このオブジェクトへの変更は古いモジュールと新しいモジュール間で相互に影響を及ぼします。

ファイル間のプライベート状態

モジュールが複数のファイルに分割されている場合、ワイド拡張モードを使用するときに制限が発生します。各ファイルのメソッドは独自のプライベート状態を維持し、モジュールの複数のファイル間で共有することはできません。以下は、この状況で同じモジュール内でプライベート状態を共有する方法を示す例です。

var MODULE = (function (my) {    var _private = my._private = my._private || {},
        _seal = my._seal = my._seal || function () {            delete my._private;            delete my._seal;            delete my._unseal;
        },
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };    // permanent access to _private, _seal, and _unseal
    return my;
}(MODULE || {}));

各ファイルは、他のモジュールと共有するためのローカル変数 _private を維持します。モジュールがロードされた後、MODULE._seal を呼び出して、ローカル変数 _private の外部アクセス属性を破棄します。モジュールを展開する必要がある場合は、ファイルをロードする前に _unseal を呼び出して、ローカル変数 _private を外部からアクセスできる属性に出力します。ロード後、_seal を呼び出して外部からアクセスできる属性を破棄します。

Submodule

Submoduleはモジュールとしての属性を定義し、上記の様々なモードを柔軟に利用することができます。

MODULE.sub = (function () {    var my = {};    // ...
    return my;
}());

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS を使用して暗号化および復号化操作を実装する

JS を使用して参照および値で渡す方法

以上がバックエンド プログラマ向けの JS モジュールの使用手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。