1. ホーム
  2. javascript

[解決済み] JavaScriptモジュールパターン(例)【終了しました

2022-05-25 03:22:15

質問

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

そこで、どなたか、モジュールがどのように一緒に動作するかを説明する例を書く時間があるかどうかをお聞きしたいのです。

どのように解決するのですか?

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

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

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

関数の使い方は2通りあります。1. 関数宣言 2. 関数式。

ここでは、関数式を使っています。

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

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

JSにおけるクロージャとは?

JSでは関数の中に関数を宣言することができます!)すると、その関数は常にスコープにカウントされます。つまり、外側の関数の変数が常に読み込まれることになります。 同じ名前のグローバル変数があれば、それは読み込まれません。これは、名前の衝突を避けるために、モジュラーデザインパターンを使用する目的の一つでもあります。

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。

目的は、変数のアクセシビリティを外部から見えないようにすることです。

お役に立てれば幸いです。幸運を祈ります。