模塊化可以幫助我們組織代碼，提高代碼的可維護性和復用性。
什么是模塊化
模塊化將代碼分割成獨立的、可復用的模塊，每個模塊只負責一個特定的功能。
這個概念類似前面講過的函數。但模塊化通常是指的是某個大的功能，而不只是一個小的方法。
所以模塊化的優勢包括：
模塊化規范
JavaScript 中常見的模塊化規范有 CommonJS、AMD、UMD 和 ES6 模塊。
CommonJS
CommonJS 主要用于 Node.js 環境。
它使用 require 導入模塊，使用 module.exports 導出模塊。
比如，我們有一個數學計算模塊，里面暫時只有 add 這一個方法。
// 數學模塊代碼 math.js,這里只寫了加法方法。 module.exports.add = function (a, b) { return a + b; }; // 在main.js中使用數學模塊時，使用require導入math.js模塊 const math = require('./math'); console.log(math.add(2, 3)); // 輸出: 5
AMD（Asynchronous Module Definition）
AMD 主要用于瀏覽器環境，使用 define 定義模塊，使用 require 導入模塊。
// math.js define([], function () { return { add: function (a, b) { return a + b; }, }; }); // main.js require(['./math'], function (math) { console.log(math.add(2, 3)); // 輸出: 5 });
這里的模塊實現和使用和前面一樣，只是使用了 AMD 規范。
UMD（Universal Module Definition）
UMD 則是兼容了 CommonJS 和 AMD，適用于需要兼容多種模塊化規范的場景。
代碼看起來有點復雜，暫時不明白也沒有關系，知道 UMD 這個規劃的概念就好。
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define([], factory); } else if (typeof module === 'object' && module.exports) { // CommonJS module.exports = factory(); } else { // Browser globals root.math = factory(); } })(this, function () { return { add: function (a, b) { return a + b; }, }; });
ES6 模塊
ES6 模塊是現代瀏覽器和 Node.js 的標準，它使用 import 和 export 關鍵字。
// math.js export function add(a, b) { return a + b; } // main.js import { add } from './math.js'; console.log(add(2, 3)); // 輸出: 5
模塊打包工具
在瀏覽器中使用模塊化代碼，需要使用模塊打包工具，如 Webpack、Rollup 和 Parcel。
Webpack
Webpack 的配置文件通常命名為 webpack.config.js，它是一個導出配置對象的 JavaScript 文件。
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), ], devServer: { contentBase: './dist', hot: true, }, };
基于上述例子，依次來看看。
entry 是 Webpack 構建的起點，指示 Webpack 從哪個文件開始構建依賴圖。
output 配置 Webpack 如何以及在哪里輸出打包后的文件。
加載器用于轉換模塊的源代碼。
Webpack 本身只能理解 JavaScript 和 JSON 文件，通過加載器可以處理其他類型的文件（如 CSS、圖片、TypeScript 等）。
插件用于執行范圍更廣的任務，如打包優化、資源管理、環境變量注入等。
所以 Webpack 將所有類型的資源（JavaScript、CSS、圖片等）視為模塊，通過依賴圖將它們打包成一個或多個 bundle。
熱模塊 hot:true 替換允許在應用程序運行時替換、添加或刪除模塊，而無需重新加載整個頁面。
代碼拆分可以將代碼分割成不同的 bundle，以便按需加載，提高性能。
// webpack.config.js module.exports = { optimization: { splitChunks: { chunks: 'all', }, }, };
Rollup
Rollup 是一個專注于 ES6 模塊的打包工具，生成的包體積較小。
// rollup.config.js export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'iife', }, };
Parcel
Parcel 是一個零配置的打包工具，使用簡單，旨在簡化開發者的工作流程。
parcel build src/index.html
動態導入模塊
ES6 模塊支持動態導入，可以在需要時加載模塊，提高性能。
// main.js document.getElementById('loadButton').addEventListener('click', async () => { const { add } = await import('./math.js'); console.log(add(2, 3)); // 輸出: 5 });
模塊化最佳實踐
示例：網頁開關
來看一個使用模塊化實現網頁開關功能的示例：
// toggle.js export function toggleVisibility(element) { if (element.style.display === 'none') { element.style.display = 'block'; } else { element.style.display = 'none'; } } // main.js import { toggleVisibility } from './toggle.js'; document.getElementById('toggleButton').addEventListener('click', () => { const content = document.getElementById('content'); toggleVisibility(content); });
HTML 部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Toggle Example</title> </head> <body> <button id="toggleButton">開關</button> <div id="content">這里是內容</div> <script type="module" src="014-main.js"></script> </body> </html>
看一下效果
總結
?? 模塊化將代碼分割成獨立的、可復用的模塊，每個模塊只負責一個特定的功能。
?? JavaScript 中常見的模塊化規范有 CommonJS、AMD、UMD 和 ES6 模塊。
?? 模塊打包工具有 Webpack、Rollup 和 Parcel。
該文章在 2024/10/29 9:00:02 編輯過
400 186 1886
