JavaScript模块化思想与CommonJS规范详解

JS 模块化（模块化思想） JS 模块化是指将一个复杂的程序按照一定的规则拆分成单个文件，并最终组合在一起的过程。这些拆分的文件就是模块，模块内部数据是私有的，只是向外部暴露一些方法与外部其他模块通信。 **为什么要模块化？** 1. 降低复杂度，提高解耦性：模块化可以将复杂的程序拆分成小的模块，从而降低复杂度和耦合度，提高代码的可维护性和可读性。 2. 避免命名冲突：模块化可以避免命名冲突，提高代码的可读性和可维护性。 3. 更好的分离，按需加载：模块化可以将代码分离成小的模块，按需加载，减少了代码的冗余和耦合度。 4. 更高复用性，高可维护性：模块化可以提高代码的复用性和可维护性，降低代码的维护成本。 **模块化概念带来的问题** 1. 请求过多：模块化可能会引发请求过多的问题，影响代码的性能和可维护性。 2. 依赖模糊：模块化可能会引发依赖模糊的问题，影响代码的可读性和可维护性。 3. 难以维护：模块化可能会引发难以维护的问题，影响代码的可维护性和可读性。 **CommonJS** CommonJS 是一个双端允许的模块化规范，可以在浏览器和服务器端使用。CommonJS 模块化的代码既可在服务器端运行，也可在浏览器端运行。 **CommonJS 规范** 1. 官网：http://wiki.commonjs.org/wiki/Modules 2. 每个文件都是一个模块。 3. CommonJS 模块化的代码既可在服务端运行，也可在浏览器端运行。 4. 服务器端：模块化的代码可直接运行。 5. 浏览器端：模块化的代码要经过 Browserify 编译。 **基本语法** 1. 暴露模块： * 第一种方式：module.exports=value * 第二种方式：exports.xxx=value 2. 引入模块： * 引入第三方模块：require(xxx)，xxx 为模块名 * 引入自定义模块：require(xxx)，xxx 为模块文件路径 3. 备注：内置关系 **暴露模块的两种方法** 1. 使用 module.exports 去暴露一个对象： ```js // 被暴露的文件 let a = 100; let b = 222; // 暴露的返回值是一个对象对象的属性可以是方法 module.exports = { showa: function showa() { console.log(a); }, showb: function showb() { console.log(b) } } ``` 2. 使用 exports.xxx 去暴露一个对象： ```js // 被暴露的文件 let a = 100; let b = 222; // 暴露的返回值是一个对象对象的属性可以是方法 exports.showa = function showa() { console.log(a); } exports.showb = function showb() { console.log(b) } ``` **结论** JS 模块化是指将一个复杂的程序按照一定的规则拆分成单个文件，并最终组合在一起的过程。模块化可以降低复杂度，避免命名冲突，更好的分离，按需加载，提高代码的可维护性和可读性。但是，模块化也可能会引发请求过多、依赖模糊和难以维护的问题。CommonJS 是一个双端允许的模块化规范，可以在浏览器和服务器端使用。