本文共 1534 字，大约阅读时间需要 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()); // 0Counter.increment();Counter.increment();console.log(Counter.value()); // 2Counter.decrement();console.log(Counter.value()); // 1
转载地址：http://zxqwz.baihongyu.com/