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中文網其他相關文章！