本文共 1587 字，大约阅读时间需要 5 分钟。
在理想情况下，开发者只需专注于核心业务逻辑实现，其他功能可以通过重用现有模块来完成。
但JavaScript在ES6之前并不支持类似其他语言的模块化编程模型，尤其缺少像"类"(class)这样的概念。
JavaScript中的模块定义
在JavaScript中，模块可以被定义为实现特定功能的一组函数和变量。只要将相关函数按功能归类组合，就可以形成一个模块。
// 示例：弹窗功能模块 const moduleAlert = { fn1: function() { // 实现具体功能 }, fn2: function() { // 实现具体功能 }, fn3: function() { // 实现具体功能 } };
// 调用方式 moduleAlert.fn1(); moduleAlert.fn2(); moduleAlert.fn3();
该方法的缺点在于全局变量易产生冲突，模块间的关联性不够明确。
模块化编程的对象写法
为了克服上述问题，可以将模块成员封装到一个对象中，实现更清晰的调用和管理。
const moduleAlert = { id: 1, fn1: function() { // 实现具体功能 }, fn2: function() { // 实现具体功能 }, fn3: function() { // 实现具体功能 } };
// 调用方式 moduleAlert.fn1(); moduleAlert.fn2(); moduleAlert.fn3();
这种方式比基础写法更清晰，但仍存在变量名冲突的风险。
模块化编程的模块模式
为了实现更严格的模块管理，可以利用JavaScript的闭包机制来创建私有方法和变量。
const Counter = (function() { const privateCounter = 0; const changeBy = function(val) { privateCounter += val; }; return { increment: function() { changeBy(1); }, decrement: function() { changeBy(-1); }, value: function() { return privateCounter; } }; })();
// 使用示例 console.log(Counter.value()); // 0 Counter.increment(); Counter.increment(); console.log(Counter.value()); // 2 Counter.decrement(); console.log(Counter.value()); // 1
转载地址：http://zxqwz.baihongyu.com/