例のJavaScriptモジュールパターン[終了]

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

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

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

即座に呼び出される関数式（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。

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

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

私はこのテーマを入力している人なら誰でもAddy Osmaniの無料の本を読むことを勧めます：

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

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

この本は、私がより保守しやすいJavaScriptを書き始めたときに非常に役立ちました。彼のさまざまなモジュールパターンの実装を見てください。彼はそれらを非常によく説明しています。

上記の答えをさらに拡張して、モジュールをアプリケーションにどのように組み合わせるかについて話したいと思いました。私はこれについてダグ・クロックフォードの本で読んだことがありますが、JavaScriptが初めてなので、まだ少し不思議でした。

私はc＃のバックグラウンド出身なので、そこから役立つ用語をいくつか追加しました。

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をリファクタリングしてテストできるようにしています）が、「これの泥沼を避けながら小さな機能単位を定義できるので、とてもいいようです」 '。

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

こちらのhttps://toddmotto.com/mastering-the-module-patternでは、完全に説明されたパターンを見つけることができます。モジュラーJavaScriptの2番目のことは、コードを複数のファイルに構成する方法です。多くの人々がAMDを使用するようにここであなたにアドバイスするかもしれませんが、経験から、多数のHTTPリクエストのためにページの応答が遅くなると私は言うことができます。解決策は、JavaScriptモジュール（ファイルごとに1つ）をCommonJS標準に従って1つのファイルにプリコンパイルすることです。こちらのサンプルをご覧くださいhttp://dsheiko.github.io/cjsc/

モジュールパターンJavaScriptは、http： //www.sga.su/module-pattern-javascript/にあります。