詳解JavaScript模板化使文章更清晰的全過程
一. 主要概念
什么是模板化?
一句話解釋:模塊化就是把一大段代碼拆分成一個個小文件(模塊),每個模塊獨立工作,互相協(xié)作。
為什么要用模塊化?
想象一下你寫了一個 3000 行的大項目代碼,如果所有變量、函數(shù)都寫在一個文件里,會發(fā)生什么?
變量命名沖突,邏輯難以維護,重用困難或者團隊協(xié)作容易踩雷。
因此,使用模塊化解決了這些問題,帶來了:
作用域隔離:模塊里的變量不會影響外部。
按需加載:只加載用到的模塊。
更容易維護:每個文件職責清晰。
方便復(fù)用:模塊可以在不同項目中復(fù)用。
模塊的基本特性
一個模塊通常具備以下特點:
| 特性 | 含義 |
|---|---|
| 獨立作用域 | 模塊內(nèi)部的變量不會影響其他模塊 |
| 導(dǎo)出接口 | 模塊暴露哪些內(nèi)容給外部使用(如函數(shù)、常量) |
| 導(dǎo)入其他模塊 | 模塊可以引用別的模塊的內(nèi)容 |
二. 模塊化的演變歷史
1. 沒有模塊(最早)
<script> // 所有代碼混在一個文件,全局變量污染嚴重 </script>
2. CommonJS(Node.js 專用)
// math.js
function add(a, b) {
return a + b;
}
module.exports = { add };
// main.js
const math = require('./math');
console.log(math.add(2, 3)); // 5特點:
同步加載模塊(適用于服務(wù)器端)
require、module.exports
3. AMD / RequireJS(早期瀏覽器模塊)
define(['math'], function (math) {
console.log(math.add(2, 3));
});特點:
支持異步加載模塊
用于瀏覽器早期階段
4. ES Modules(現(xiàn)代瀏覽器和 Node.js 支持)
// math.js
export function add(a, b) {
return a + b;
}
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5特點:
瀏覽器和 Node.js 都支持
支持靜態(tài)分析、tree shaking、異步加載
三. 常用導(dǎo)入導(dǎo)出語法(ES Module)
命名導(dǎo)出
// math.js
export const PI = 3.14;
export function square(x) { return x * x; }
// 使用
import { PI, square } from './math.js';默認導(dǎo)出
// logger.js
export default function log(msg) {
console.log(msg);
}
// 使用
import log from './logger.js';全部導(dǎo)入為命名空間
import * as utils from './math.js'; console.log(utils.square(4));
四. 示例
例題:構(gòu)建一個模塊化的計算器
題目描述:做一個簡化版的模塊化計算器項目,包含兩個模塊 + 一個主程序:
/calculator.js ← 數(shù)學(xué)計算模塊 /logger.js ← 日志模塊 /main.js ← 主程序模塊
calculator.js:導(dǎo)出基本的加減乘除函數(shù)
// calculator.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
return b !== 0 ? a / b : 'Cannot divide by zero';
}logger.js:導(dǎo)出默認的 log 函數(shù)
// logger.js
export default function log(message) {
console.log(`[Log] ${message}`);
} main.js:導(dǎo)入并使用模塊
// main.js
import * as calc from './calculator.js';
import log from './logger.js';
const result = calc.multiply(4, 5);
log(`4 x 5 = ${result}`);
const result2 = calc.divide(10, 2);
log(`10 ÷ 2 = ${result2}`);詳解
1. calculator.js:命名導(dǎo)出
// calculator.js
export function add(a, b) { ... }
export function subtract(a, b) { ... }
export function multiply(a, b) { ... }
export function divide(a, b) { ... }解釋:
export function xxx就是命名導(dǎo)出導(dǎo)出多個功能函數(shù),調(diào)用時可以按需導(dǎo)入
2. logger.js:默認導(dǎo)出
// logger.js
export default function log(message) {
console.log(`[Log] ${message}`);
}解釋:
export default表示這是模塊的默認輸出一個模塊只能有一個
default export默認導(dǎo)出在導(dǎo)入時可以重命名
3. main.js:導(dǎo)入模塊并使用
import * as calc from './calculator.js';
import log from './logger.js';
const result = calc.multiply(4, 5);
log(`4 x 5 = ${result}`);解釋:
import * as calc from './calculator.js'
表示把所有命名導(dǎo)出聚合成一個對象
calc使用時通過
calc.add()這樣的方式調(diào)用
import log from './logger.js'
這是導(dǎo)入默認導(dǎo)出,不需要加花括號
名字可以自定義(默認導(dǎo)出 ≠ 名字必須叫 log)
模塊導(dǎo)入導(dǎo)出方式總結(jié)

五. 總結(jié)
1. 模塊是為了隔離作用域、組織代碼
2.export 是導(dǎo)出,import 是導(dǎo)入
3. 命名導(dǎo)出可以多個,默認導(dǎo)出只有一個
4. 導(dǎo)入時你可以選擇單獨導(dǎo)入或整體打包成命名空間
以上就是詳解JavaScript模板化使文章更清晰的全過程的詳細內(nèi)容,更多關(guān)于JavaScript模板化過程的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js 實現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹)
這篇文章主要介紹了js 實現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
使用setTimeout實現(xiàn)SetInterval原理解析
這篇文章主要為大家介紹了使用setTimeout實現(xiàn)SetInterval原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
基于javascript bootstrap實現(xiàn)生日日期聯(lián)動選擇
這篇文章主要介紹了基于javascript bootstrap實現(xiàn)生日日期聯(lián)動選擇的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實現(xiàn)
本篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表和雙向循環(huán)鏈表的實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11
JavaScript實現(xiàn)in-place思想的快速排序方法
這篇文章主要介紹了JavaScript實現(xiàn)in-place思想的快速排序方法的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08
html中通過JS獲取JSON數(shù)據(jù)并加載的方法
本篇內(nèi)容主要給大家講了如何通過javascript解析JSON并得到數(shù)據(jù)后添加到HTML中的方法,需要的朋友參考下。2017-11-11
ionic2打包android時gradle無法下載的解決方法
這篇文章主要為大家詳細介紹了ionic2打包android時gradle無法下載的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04
Javascript將數(shù)值轉(zhuǎn)換為金額格式(分隔千分位和自動增加小數(shù)點)
這篇文章主要介紹Javascript將數(shù)值轉(zhuǎn)換為金額格式的方法,通俗易懂,需要的朋友可以參考下。2016-06-06

