JavaScript-Module

• Jetzt schreiben wir nicht alle JS in eine einzige Datei und senden sie an den Kunden.
• Heute schreiben wir Code in Module, die Daten untereinander austauschen und besser wartbar sind.
• Konventionell ist die Verwendung von CamelCase-Namen für Module.
• Wir können sogar Module von Drittanbietern über NPM-Repos wie JQuery, React, Webpack, Babel usw. in unseren eigenen Code einbinden.
• Aus kleinen Moduldateien wird ein endgültiges Paket erstellt, das auf dem Produktionsserver bereitgestellt und schließlich an Clients gesendet wird.
• Module werden von älteren Browsern nicht unterstützt
• Aus Leistungsgründen ist es besser, kleine JS-Dateien an den Browser zu senden.
• Module sind ein äußerst wichtiger Teil von JS und werden von Entwicklern bereits seit Jahrzehnten in anderen Sprachen verwendet.
• Module: wiederverwendbarer Code, der Implementierungsdetails eines bestimmten Teils unseres Projekts kapselt.
• Es handelt sich um eine eigenständige Datei, aber das muss nicht sein.
• Module können auch Importe und Exporte haben Native ES6-Module: Vor ES6 gab es keine Module. Musste selbst implementiert werden oder externe Bibliotheken nutzen. Module werden in Dateien gespeichert, genau ein Modul pro Datei.
• Wir können Werte, Funktionen aus Modulen usw. exportieren. Was auch immer wir exportieren, wird als öffentliche API bezeichnet, die für die Nutzung durch anderen Code verfügbar gemacht wird.
• Diese öffentliche API wird durch den Import von öffentlichem Code in das Modul genutzt und wird als Abhängigkeiten bezeichnet.
• Einfache Anwendungen können auch ohne Module geschrieben werden, aber für Projekte im Unternehmensmaßstab benötigen wir Module.

• Adv:
  -> Macht das Zusammenstellen von Software wirklich einfach, da Module kleine Bausteine ​​sind, die wir zusammensetzen, um komplexe Anwendungen zu erstellen.
  -> Isolieren von Komponenten: Jede Funktion kann vollständig isoliert entwickelt werden, ohne sich Gedanken über die Arbeit anderer Entwickler oder die Funktionsweise des gesamten Systems machen zu müssen.
  -> Code-Abstraktion: Implementieren Sie Low-Level-Code in Modulen, importieren Sie diese Abstraktionen in andere Module, was natürlich zu einer besser organisierten Codebasis führt.
  -> Wiederverwendbarkeit des Codes: Ermöglichen Sie uns die Wiederverwendung von Code auch über mehrere Projekte hinweg.

• Modernes JS verwendet Bündelung und Transpilierung.
  

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

Das obige ist der detaillierte Inhalt vonJavaScript-Module. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!