モジュール

• モジュール パターンは ES6 モジュールより前に使用されていました。
• 目標: 機能のカプセル化、プライベート データのサポート、パブリック API の公開、これらすべては IIFE を使用することで達成されます。

IIFE：例（関数（）{}）（）;

// IIFE Goal: Create a new scope, return the data just once. All of data inside IIFE will be private as it would inside the fn scope. 
// Using this way, we don't need to call it separately. And it ensures its called only once.
// IIFE is created only once, goal is 'NOT TO REUSE' by executing it multiple times.

// Result of running an IIFE is stored, or else it will disappear simply.
const ShoppingCart2 = (function(){
  const cart = [];
  const shippingCost = 10;
  const totalPrice = 237;
  const totalQuantity = 10;

  const addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
  };

  const orderStock = function(product, quantity){
    console.log(`${quantity} ${product} ordered from supplier`);
  };
  // Need to return something, in order to return a public API. For that, an object is returned containing stuff which needs to be made public.
  return {
    addToCart,
    cart, 
    totalPrice,
    totalQuantity
  };
})();
// Everything inside the above module is private to the module.
// The above fn returns the object mentioned inside return statement and assign it to the ShoppingCart2 variable mentioned at the start of fn. This IIFE is returned then long ago.
// All this is possible because of closures. Hence, addToCart can acccess the cart variable.

ShoppingCart2.addToCart('apple', 4);
ShoppingCart2.addToCart('pizza', 5);
ShoppingCart2;
ShoppingCart2.shippingCost; // inaccessible.

モジュール パターンは、ES6 モジュール以前から機能していました。

欠点:

1. ES6 モジュールの場合のように、ファイルごとに 1 つのモジュールが必要な場合は、複数のスクリプトを作成し、HTML ファイル内でリンクする必要があります。
2. スクリプトのロード順序も重要です。
3. これらの変数はすべてグローバル スコープ内に存在します。

ネイティブ ES6 モジュールとモジュール パターンに加えて、JS は JS にネイティブではない他のモジュール システムもサポートしていました。元。 AMD、CommmonJS
元。 CommonJS モジュールは、Node.js の存在全体で使用されます。最近、ES6 モジュールが Node.js に実装されました
npm は元々ノード用に意図されていたため、npm リポジトリ上のすべてのモジュールは依然として commonJS モジュール システムを使用します。その後になって、npm は JS 世界全体のリポジトリになりました。したがって、基本的に CommonJS を使い続けることになります。したがって、CommonJS は Node.js に影響を与えるため、依然として注意を払う必要があります
ES6 モジュールと同様に、CommonJS では 1 ファイルが 1 モジュールになります。
commonJS コードはブラウザでは動作しませんが、node.js
では動作します。 ES モジュールは最終的にはすべてのモジュール システムを置き換えますが、現時点では commonjs も使用する必要があります。

export キーワードはオブジェクトであり、コード内にもブラウザ内にも定義されていません。

// EXPORT
export.addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
};

// IMPORT: is similar to ES Modules but would use a require fn.
// require is not defined in browser env but its defined in node env as its a part of commonjs
const addToCart = require('./shoppingCart.js')

以上がモジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。