詳解JavaScript模板化使文章更清晰的全過(guò)程
一. 主要概念
什么是模板化?
一句話解釋:模塊化就是把一大段代碼拆分成一個(gè)個(gè)小文件(模塊),每個(gè)模塊獨(dú)立工作,互相協(xié)作。
為什么要用模塊化?
想象一下你寫了一個(gè) 3000 行的大項(xiàng)目代碼,如果所有變量、函數(shù)都寫在一個(gè)文件里,會(huì)發(fā)生什么?
變量命名沖突,邏輯難以維護(hù),重用困難或者團(tuán)隊(duì)協(xié)作容易踩雷。
因此,使用模塊化解決了這些問(wèn)題,帶來(lái)了:
作用域隔離:模塊里的變量不會(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. 沒(méi)有模塊(最早)
<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)出語(yǔ)法(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è)簡(jiǎn)化版的模塊化計(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è)對(duì)象
calc
使用時(shí)通過(guò)
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模板化使文章更清晰的全過(guò)程的詳細(xì)內(nèi)容,更多關(guān)于JavaScript模板化過(guò)程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript電話號(hào)碼格式化的多種實(shí)現(xiàn)方式
本文希望通過(guò)一道簡(jiǎn)單的題目,讓剛接觸JavaScript的新手們了解一個(gè)合格的前端程序員需要具備哪些素質(zhì),文章給大家介紹了JavaScript電話號(hào)碼格式化的多種實(shí)現(xiàn)方式,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-11-11JavaScript加入收藏夾功能(兼容IE、firefox、chrome)
這篇文章主要介紹了JavaScript加入收藏夾功能,兼容IE、firefox、chrome,并解決了window.sidebar.addPanel is not a function問(wèn)題,需要的朋友可以參考下2014-05-05antDesign 自定義分頁(yè)樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了antDesign 自定義分頁(yè)樣式的實(shí)現(xiàn)代碼,這里用到了自定義指令,如果大家用不到可以按照自己的實(shí)際效果開(kāi)發(fā),本文通過(guò)實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-10-10javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果
這篇文章主要介紹了javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果,感興趣的小伙伴們可以參考一下2015-12-12