Modules Javascript

• Maintenant, nous n'écrivons plus tous les JS dans un seul fichier et les envoyons au client.
• Aujourd'hui, nous écrivons du code dans des modules qui partagent des données entre eux et sont plus maintenables.
• La convention consiste à utiliser les noms camelCase pour les modules.
• Nous pouvons même inclure des modules tiers dans notre propre code via des dépôts npm comme jquery, réagir, webpack, babel etc.
• Un bundle final est construit à partir de petits fichiers de module qui sont déployés sur le serveur de production, puis finalement envoyés aux clients.
• Les modules ne sont pas pris en charge par les anciens navigateurs
• Pour des raisons de performances, il est préférable d'envoyer de petits fichiers js au navigateur.
• Les modules sont une partie très importante de JS, déjà utilisés dans d'autres langages depuis des décennies par les développeurs.
• Modules : morceau de code réutilisable, qui encapsule les détails d'implémentation d'une certaine partie de notre projet.
• C'est un fichier autonome, mais ce n'est pas obligatoire.
• Les modules peuvent également avoir des importations et des exportations Modules ES6 natifs : il n'y avait aucun module avant ES6. Nous avons dû l'implémenter nous-mêmes ou utiliser des bibliothèques externes. Les modules sont stockés dans des fichiers, exactement un module par fichier.
• Nous pouvons exporter des valeurs, des fonctions hors de modules, etc. Tout ce que nous exportons est appelé une API publique qui est exposée pour que d'autres codes puissent la consommer.
• Cette API publique est consommée en important du code public dans le module et est appelée dépendances.
• Des applications simples peuvent également être écrites sans modules, mais pour les projets à l'échelle de l'entreprise, nous avons besoin de modules.

• Av :
  -> Rend vraiment facile la composition de logiciels car les modules sont de petits éléments de base que nous assemblons pour créer des applications complexes.
  -> Isoler les composants : chaque fonctionnalité peut être développée de manière complètement isolée et sans se soucier du travail des autres développeurs ou du fonctionnement de l'ensemble du système.
  -> Abstraction de code : implémentez du code de bas niveau dans des modules, importez ces abstractions dans d'autres modules, conduisant naturellement à une base de code plus organisée.
  -> Réutilisabilité du code : permettez-nous de réutiliser le code même sur plusieurs projets.

• Le JS moderne utilise le regroupement et la transpilation.
  

## Bundling = is a complex process which involves:
a. Eliminate unused Code
b. Combine all modules into single file.
c. Compress the code.
Ex. webpack build tool - requires manual config, hence complex.
Ex. parcel - zero build tool as we don't need to write any setup code.

## Transpiling/Polyfiling:
Convert modern JS to ES5 or older syntax such that older browser supports the application. 
Ex. done using tool called Babel

Entire process results in the final bundle file for production ready to be deployed on server. 

### Scripts are also files but they are different from ES6 modules in the following ways:
Script[used earlier]:
- All top level variables are always global. This leads to global namespace pollution and name-coliision.
- Default mode: Sloppy mode
- Top level 'this' points to window object.
- Import/Export of values is not allowed.
- Linked to html using plain script tag.
- Downloaded by default in sync way, unless async or defer attribute is used.

### ES6 Modules:
- All top-level variables are scoped to module i.e they are private by default. Such a value can be access by outside varible only when its exported by the module else it will be inaccessible for outside world.
- Default mode: Strict mode. Hence with modules no more need to declare strict mode.
- Top level 'this' is 'undefined'
- Allows import/export of values using ES6 syntax of import/export.
- Link to html file using <script type="module"> tag.
- File download always happens in an async way, i.e for module loaded from html or an import one module to another.

## Understanding module import process:
Parsing -> [Asyn module download, Linking import-export, Execute individual module itself] -> Execution overall index.js
- import/export only need to happen at the top level of if-block or any function. Imports are hoisted. Importing values is always the first thing which happens in a module.
- Top-level static imports make imports known before execution. 
- Modules are loaded in async way from the server, importing happens in sync manner. 
- Parsing refers to reading the code without executing it in which imports are hoisted. Modules are imported even before execution. Hence, it enables bundling & code elimation even before fn exection. [V Impt as large projects have 100s of modules, and 3rd party modules also from which we want the small piece and not the entire module]
- Bundlers can then join multiple modules, and then eliminate code. hence, we can easily import/export from code.
- After a module arrives, its parsed and then the module exports are linked to imports in index.js i.e live connection is established between import inside index.js and export statement of the module file. They are not copied. Import is just a reference to the exported value. Hence, when the value changes in the exporting module, it also changes in the importing module too. This concept is unique to ES6 modules, other module system don't work like this.
- Code in the imported modules is executed.

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!