140

2 つ (またはそれ以上) の異なるモジュールがどのように接続されて連携するかを示す、アクセス可能な例が見つかりません。

そこで、モジュールがどのように連携するかを説明する例を書く時間があるかどうかを尋ねたいと思います。

4

5 に答える 5

264

モジュール設計パターンにアプローチするには、まず次の概念を理解する必要があります。

即時呼び出し関数式 (IIFE):

(function() {
      // Your code goes here 
}());

関数を使用する方法は 2 つあります。1. 関数宣言 2. 関数式。

ここでは関数式を使用しています。

名前空間とは 上記のコードに名前空間を追加すると、

var anoyn = (function() {
}());

JSのクロージャーとは何ですか?

つまり、任意の変数スコープを持つ/別の関数内で関数を宣言すると (JS では別の関数内で関数を宣言できます!)、その関数スコープは常にカウントされます。これは、外部関数の変数が常に読み取られることを意味します。同じ名前のグローバル変数 (存在する場合) は読み取られません。これは、名前の競合を回避するモジュール設計パターンを使用する目的の 1 つでもあります。

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

ここで、前述の 3 つの概念を適用して、最初のモジュール設計パターンを定義します。

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

上記のコードの jsfiddle 。

目的は、変数のアクセシビリティを外界から隠すことです。

お役に立てれば。幸運を。

于 2013-11-05T23:41:42.467 に答える
39

Addy Osmani の無料の本を読むことを、このテーマに入るすべての人に強くお勧めします。

「JavaScript デザイン パターンの学習」。

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

この本は、保守性の高い JavaScript を書き始めたときに非常に役立ち、今でも参考資料として使用しています。彼のさまざまなモジュール パターンの実装を見てください。彼はそれらを非常によく説明しています。

于 2013-12-15T20:55:17.793 に答える
19

上記の回答を拡張して、モジュールをアプリケーションに組み込む方法について説明したいと思います。これについては doug crockford の本で読んだことがありますが、javascript は初めてなので、まだ少し不思議でした。

私は ac# のバックグラウンドを持っているので、そこから役立つと思われる用語をいくつか追加しました。

HTML

ある種のトップレベルの html ファイルができます。これをプロジェクト ファイルと考えると便利です。プロジェクトに追加するすべての JavaScript ファイルは、これに入る必要がありますが、残念ながら、これに対するツール サポートは得られません (私は IDEA を使用しています)。

次のようなスクリプト タグを使用してプロジェクトにファイルを追加する必要があります。

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

タグを折りたたむと失敗するようです-xmlのように見えますが、実際にはもっとクレイジーなルールがあります!

名前空間ファイル

MasterFile.js

myAppNamespace = {};

それでおしまい。これは、残りのコードが存在する単一のグローバル変数を追加するためのものです。ネストされた名前空間をここ (または独自のファイル) で宣言することもできます。

モジュール

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

ここで行っているのは、メッセージ カウンター関数をアプリケーションの変数に割り当てることです。これは、すぐに実行する関数を返す関数です。

コンセプト

SomeComponent の一番上の行は、何かを宣言している名前空間であると考えると役立つと思います。これに対する唯一の注意点は、すべての名前空間が最初に他のファイルに表示される必要があることです。それらは、アプリケーション変数によってルート化された単なるオブジェクトです。

現時点では、これに関して小さな手順しか実行していません (テストできるように、extjs アプリから通常の JavaScript をリファクタリングしています) 。 ' .

このスタイルを使用して、関数のコレクションを含むオブジェクトを返す関数を返し、それをすぐに呼び出さないことにより、コンストラクターを定義することもできます。

于 2014-05-14T15:41:53.017 に答える
6

ここhttps://toddmotto.com/mastering-the-module-patternで、完全に説明されたパターンを見つけることができます。モジュラー JavaScript の 2 つ目の点は、複数のファイルでコードを構造化する方法です。ここでは AMD を使用するようにアドバイスする人が多いかもしれませんが、経験から言えば、多数の HTTP 要求が原因でページの応答が遅くなることがあります。解決策は、JavaScript モジュール (ファイルごとに 1 つ) を事前にコンパイルして、CommonJS 標準に従って単一のファイルにすることです。こちらのサンプルをご覧くださいhttp://dsheiko.github.io/cjsc/

于 2014-08-11T09:11:55.270 に答える
-3

ここでモジュール パターン JavaScript を見つけることができますhttp://www.sga.su/module-pattern-javascript/

于 2015-05-13T19:09:22.407 に答える