web-dev-qa-db-ja.com

JavaScriptモジュールパターンと例

2つ（またはそれ以上）の異なるモジュールがどのように連携して連携するかを示すアクセシブルな例を見つけることができません。

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

javascriptmodule
133
Srle

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

即時呼び出し関数式（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。

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

お役に立てれば。がんばろう。

252
kta

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

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

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

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

38
Code Novitiate

上記の答えを拡張して、モジュールをアプリケーションに組み込む方法を説明すると思いました。これについてはダグ・クロックフォードの本で読んだことがありますが、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をリファクタリングしています） 'this'。

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

19
JonnyRaa

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

6
Dmitry Sheiko