JavaScript 模块

• 现在我们不再将所有 JS 写在一个文件中并发送给客户端。
• 今天，我们将代码编写到模块中，这些模块之间共享数据并且更易于维护。
• 约定是使用驼峰命名法命名模块。
• 我们甚至可以通过 npm 存储库将第 3 方模块包含到我们自己的代码中，例如 jquery、react、webpack、babel 等。
• 最终的捆绑包是由部署到产品服务器的小模块文件构建的，最终发送给客户端。
• 旧版浏览器不支持模块
• 出于性能原因，最好将小js文件发送到浏览器。
• 模块是 JS 中非常重要的一部分，开发人员已经在其他语言中使用了数十年。
• 模块：可重用的一段代码，封装了项目某个部分的实现细节。
• 它是一个独立文件，但不一定是。
• 模块也可以有导入和导出 原生 ES6 模块：ES6 之前没有模块。必须自己实现或使用外部库。模块存储在文件中，每个文件只有一个模块。
• 我们可以从模块中导出值、函数等。我们导出的任何内容都称为公共 API，公开供其他代码使用。
• 这个公共 API 通过将公共代码导入到模块中来使用，称为依赖项。
• 简单的应用程序也可以在没有模块的情况下编写，但是对于企业规模的项目，我们需要模块。

• 高级：
  ->使编写软件变得非常容易，因为模块是我们组合在一起构建复杂应用程序的小构建块。
  ->隔离组件：每个功能都可以完全隔离地开发，无需担心其他开发人员的工作或整个系统的工作方式。
  ->代码抽象：在模块中实现低级代码，将这些抽象导入到其他模块中，自然会产生更有组织的代码库。
  ->代码可重用性：允许我们在多个项目中重用代码。

• 现代 JS 使用捆绑和转译。
  

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

以上是JavaScript 模块的详细内容。更多信息请关注PHP中文网其他相关文章！