Modules

• Le modèle de module a été utilisé avant les modules ES6.
• Objectif : encapsuler les fonctionnalités, prendre en charge les données privées, exposer l'API publique et tout cela est réalisé en utilisant les IIFE.

IIFE : Ex. (fonction(){})();

// 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.

Le modèle de module fonctionnait même avant les modules ES6.

Désavis :

1. Maintenant, si nous voulons un module par fichier, comme nous le faisons avec les modules ES6, alors plusieurs scripts doivent être créés et liés dans le fichier HTML.
2. L'ordre de chargement du script aura également de l'importance.
3. Toutes ces variables vivront dans une portée globale.

Outre les modules et modèles de modules ES6 natifs, JS prenait également en charge d'autres systèmes de modules qui n'étaient pas natifs de JS. Ex. AMD, CommonJS
Ex. Les modules CommonJS sont utilisés dans Node.js pendant toute son existence. Récemment, des modules ES6 ont été implémentés dans Node.js
Tous les modules du référentiel npm utilisent toujours le système de modules commonJS car npm était initialement destiné au nœud. Ce n'est que plus tard que npm est devenu le référentiel de l'ensemble du monde JS. Par conséquent, nous sommes essentiellement coincés avec CommonJS. Ainsi, CommonJS doit toujours faire l'objet d'une attention particulière en tant qu'empreinte dans Node.js
Tout comme le module ES6, 1 fichier équivaut à 1 module dans CommonJS.
Le code commonJS ne fonctionnera pas dans le navigateur, mais il fonctionnera dans node.js
Les modules ES finiront par remplacer tous les systèmes de modules, mais à partir de maintenant, nous devons également utiliser commonjs.

Le mot-clé d'exportation est un objet qui n'est pas défini dans notre code ni dans le navigateur.

// 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')

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!