发布日期：2024年1月 | 作者：前端架构师
一、JavaScript模块化演进历程
随着前端应用复杂度的不断提升，模块化开发已成为现代JavaScript开发的基石。了解模块化的发展历程有助于我们更好地选择和使用合适的模块系统。
模块化发展的四个阶段：
传统开发的问题：
// 全局命名空间污染
var utils = {
formatDate: function() { /* ... */ },
validateEmail: function() { /* ... */ }
};
var user = {
getName: function() { /* ... */ },
setEmail: function() { /* ... */ }
};
// 依赖关系不明确
// 代码难以维护和测试二、CommonJS模块系统深度解析
基本语法与原理
// math.js - 模块定义
const PI = 3.14159;
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
// 导出模块接口
module.exports = {
PI,
add,
multiply
};
// 或者使用exports对象
exports.PI = PI;
exports.add = add;模块加载机制
// app.js - 模块使用
const math = require('./math.js');
const { add, PI } = require('./math.js');
console.log(math.PI); // 3.14159
console.log(add(2, 3)); // 5
// 内置模块
const fs = require('fs');
const path = require('path');
// 第三方模块
const axios = require('axios');
const lodash = require('lodash');自定义模块加载器
class CustomModule {
constructor(id) {
this.id = id;
this.exports = {};
}
static require(filepath) {
// 解析绝对路径
const filename = path.resolve(filepath);
// 缓存检查
if (CustomModule.cache[filename]) {
return CustomModule.cache[filename].exports;
}
// 创建模块实例
const module = new CustomModule(filename);
// 读取文件内容
const content = fs.readFileSync(filename, 'utf-8');
// 包装函数
const wrapper = `(function(exports, require, module, __filename, __dirname) {
${content}
})`;
// 执行模块代码
const compiledWrapper = eval(wrapper);
compiledWrapper(
module.exports,
CustomModule.require,
module,
filename,
path.dirname(filename)
);
// 缓存模块
CustomModule.cache[filename] = module;
return module.exports;
}
}
CustomModule.cache = {};三、ES6模块系统详解
命名导出与导入
// userModule.js - 命名导出
export const MAX_USERS = 100;
export function createUser(name, email) {
return {
id: Date.now(),
name,
email,
createdAt: new Date()
};
}
export class UserValidator {
static validateEmail(email) {
return /^[^s@]+@[^s@]+.[^s@]+$/.test(email);
}
static validateName(name) {
return name.length >= 2 && name.length <= 50;
}
}
// 默认导出
export default class UserService {
constructor() {
this.users = new Map();
}
addUser(user) {
this.users.set(user.id, user);
return user;
}
getUser(id) {
return this.users.get(id);
}
}多种导入方式
// 方式1：命名导入
import { createUser, UserValidator, MAX_USERS } from './userModule.js';
// 方式2：重命名导入
import { createUser as createNewUser } from './userModule.js';
// 方式3：全部导入为命名空间
import * as UserModule from './userModule.js';
// 方式4：默认导入
import UserService from './userModule.js';
// 方式5：混合导入
import UserService, { createUser, MAX_USERS } from './userModule.js';
// 动态导入
async function loadUserModule() {
try {
const userModule = await import('./userModule.js');
const user = userModule.createUser('张三', 'zhangsan@example.com');
console.log(user);
} catch (error) {
console.error('模块加载失败:', error);
}
}循环依赖处理
// moduleA.js
import { funcB } from './moduleB.js';
export function funcA() {
console.log('执行函数A');
funcB();
}
export function helperA() {
console.log('辅助函数A');
}
// moduleB.js
import { helperA } from './moduleA.js';
export function funcB() {
console.log('执行函数B');
helperA();
}
// ES6模块的循环依赖是安全的
// 因为导入是只读的视图四、高级模块模式与最佳实践
单例模式模块
// logger.js - 单例日志模块
let instance = null;
class Logger {
constructor() {
if (instance) {
return instance;
}
this.logs = [];
this.level = 'info';
instance = this;
}
setLevel(level) {
this.level = level;
}
log(message, level = 'info') {
const logEntry = {
timestamp: new Date(),
message,
level
};
this.logs.push(logEntry);
console[level](`[${level.toUpperCase()}] ${message}`);
}
getLogs() {
return [...this.logs];
}
clear() {
this.logs = [];
}
}
// 确保单例
export default new Logger();工厂模式模块
// storageFactory.js
class LocalStorage {
constructor() {
this.prefix = 'app_';
}
set(key, value) {
localStorage.setItem(this.prefix + key, JSON.stringify(value));
}
get(key) {
const item = localStorage.getItem(this.prefix + key);
return item ? JSON.parse(item) : null;
}
}
class SessionStorage {
constructor() {
this.prefix = 'app_';
}
set(key, value) {
sessionStorage.setItem(this.prefix + key, JSON.stringify(value));
}
get(key) {
const item = sessionStorage.getItem(this.prefix + key);
return item ? JSON.parse(item) : null;
}
}
export function createStorage(type = 'local') {
switch (type) {
case 'local':
return new LocalStorage();
case 'session':
return new SessionStorage();
default:
throw new Error(`不支持的存储类型: ${type}`);
}
}配置管理模块
// configManager.js
const defaultConfig = {
api: {
baseURL: 'https://api.example.com',
timeout: 5000
},
features: {
darkMode: false,
notifications: true
},
theme: {
primaryColor: '#007bff',
fontSize: '16px'
}
};
class ConfigManager {
constructor() {
this.config = { ...defaultConfig };
this.overrides = this.loadOverrides();
this.mergeConfig();
}
loadOverrides() {
try {
return JSON.parse(localStorage.getItem('app_config')) || {};
} catch {
return {};
}
}
mergeConfig() {
this.config = this.deepMerge(this.config, this.overrides);
}
deepMerge(target, source) {
const output = { ...target };
if (this.isObject(target) && this.isObject(source)) {
Object.keys(source).forEach(key => {
if (this.isObject(source[key])) {
if (!(key in target)) {
output[key] = source[key];
} else {
output[key] = this.deepMerge(target[key], source[key]);
}
} else {
output[key] = source[key];
}
});
}
return output;
}
isObject(item) {
return item && typeof item === 'object' && !Array.isArray(item);
}
get(path, defaultValue = null) {
return path.split('.').reduce((obj, key) =>
obj && obj[key] !== undefined ? obj[key] : defaultValue, this.config);
}
set(path, value) {
const keys = path.split('.');
const lastKey = keys.pop();
const target = keys.reduce((obj, key) => {
if (!(key in obj)) obj[key] = {};
return obj[key];
}, this.overrides);
target[lastKey] = value;
this.saveOverrides();
this.mergeConfig();
}
saveOverrides() {
localStorage.setItem('app_config', JSON.stringify(this.overrides));
}
reset() {
this.overrides = {};
this.saveOverrides();
this.mergeConfig();
}
}
export default new ConfigManager();五、构建工具与模块打包实战
Webpack模块打包配置
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js',
admin: './src/admin.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
clean: true
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
chunks: ['main']
})
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all'
},
common: {
name: 'common',
minChunks: 2,
chunks: 'all',
enforce: true
}
}
}
}
};Tree Shaking优化
// mathUtils.js - 确保ES6模块语法
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
// 这个函数没有被导出，会被tree shaking移除
function internalHelper() {
console.log('这个函数不会被包含在最终打包文件中');
}
// app.js - 只导入使用的函数
import { add } from './mathUtils.js';
console.log(add(2, 3));
// multiply函数会被tree shaking移除动态导入与代码分割
// 路由级别的代码分割
const routes = {
'/': () => import('./views/Home.js'),
'/about': () => import('./views/About.js'),
'/contact': () => import('./views/Contact.js')
};
async function loadRoute(route) {
try {
const module = await routes[route]();
return module.default;
} catch (error) {
console.error('路由加载失败:', error);
return import('./views/404.js');
}
}
// 基于功能的代码分割
document.getElementById('chart-btn').addEventListener('click', async () => {
const chartModule = await import('./charts/index.js');
chartModule.renderChart('#chart-container');
});
// 预加载策略
function preloadCriticalModules() {
const criticalModules = [
import('./utils/analytics.js'),
import('./utils/error-handler.js')
];
Promise.all(criticalModules).then(modules => {
console.log('关键模块预加载完成');
});
}
