詳解JavaScript模板化使文章更清晰的全過程
一. 主要概念
什么是模板化?
一句話解釋:模塊化就是把一大段代碼拆分成一個(gè)個(gè)小文件(模塊),每個(gè)模塊獨(dú)立工作,互相協(xié)作。
為什么要用模塊化?
想象一下你寫了一個(gè) 3000 行的大項(xiàng)目代碼,如果所有變量、函數(shù)都寫在一個(gè)文件里,會(huì)發(fā)生什么?
變量命名沖突,邏輯難以維護(hù),重用困難或者團(tuán)隊(duì)協(xié)作容易踩雷。
因此,使用模塊化解決了這些問題,帶來了:
作用域隔離:模塊里的變量不會(huì)影響外部。
按需加載:只加載用到的模塊。
更容易維護(hù):每個(gè)文件職責(zé)清晰。
方便復(fù)用:模塊可以在不同項(xiàng)目中復(fù)用。
模塊的基本特性
一個(gè)模塊通常具備以下特點(diǎn):
| 特性 | 含義 |
|---|---|
| 獨(dú)立作用域 | 模塊內(nèi)部的變量不會(huì)影響其他模塊 |
| 導(dǎo)出接口 | 模塊暴露哪些內(nèi)容給外部使用(如函數(shù)、常量) |
| 導(dǎo)入其他模塊 | 模塊可以引用別的模塊的內(nèi)容 |
二. 模塊化的演變歷史
1. 沒有模塊(最早)
<script> // 所有代碼混在一個(gè)文件,全局變量污染嚴(yán)重 </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特點(diǎn):
同步加載模塊(適用于服務(wù)器端)
require、module.exports
3. AMD / RequireJS(早期瀏覽器模塊)
define(['math'], function (math) {
console.log(math.add(2, 3));
});特點(diǎn):
支持異步加載模塊
用于瀏覽器早期階段
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特點(diǎn):
瀏覽器和 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';默認(rèn)導(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)建一個(gè)模塊化的計(jì)算器
題目描述:做一個(gè)簡化版的模塊化計(jì)算器項(xiàng)目,包含兩個(gè)模塊 + 一個(gè)主程序:
/calculator.js ← 數(shù)學(xué)計(jì)算模塊 /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)出默認(rèn)的 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)出多個(gè)功能函數(shù),調(diào)用時(shí)可以按需導(dǎo)入
2. logger.js:默認(rèn)導(dǎo)出
// logger.js
export default function log(message) {
console.log(`[Log] ${message}`);
}解釋:
export default表示這是模塊的默認(rèn)輸出一個(gè)模塊只能有一個(gè)
default export默認(rèn)導(dǎo)出在導(dǎo)入時(shí)可以重命名
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)出聚合成一個(gè)對象
calc使用時(shí)通過
calc.add()這樣的方式調(diào)用
import log from './logger.js'
這是導(dǎo)入默認(rèn)導(dǎo)出,不需要加花括號(hào)
名字可以自定義(默認(rèn)導(dǎo)出 ≠ 名字必須叫 log)
模塊導(dǎo)入導(dǎo)出方式總結(jié)

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

