js语言模块化
模块就是将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起，块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。
模块化的好处
- 避免命名冲突(减少命名空间污染)
- 更好的分离, 按需加载
- 更高复用性
- 高可维护性
模块化规范
commonjs
CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境
例：
//module1.jsmodule.exports = { msg: 'module1', foo() { console.log(this.msg) }}// app.js文件// 引入module1模块let module1 = require('./modules/module1')module1.foo() //module1AMD规范
AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅。
例
//定义有依赖的模块define(['module1', 'module2'], function(m1, m2){ return 模块})// 引入使用模块require(['module1', 'module2'], function(m1, m2){ 使用m1/m2})CMD规范
CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行。不过，依赖SPM 打包，模块的加载逻辑偏重
//定义有依赖的模块define(function(require, exports, module){ //引入依赖模块(同步) var module2 = require('./module2') //引入依赖模块(异步) require.async('./module3', function (m3) { }) //暴露模块 exports.xxx = value})define(function (require) { var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show()})ES6模块
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案**。
/** 定义模块 math.js **/var basicNum = 0;var add = function (a, b) { return a + b;};export { basicNum, add };/** 引用模块 **/import { basicNum, add } from './math';function test(ele) { ele.textContent = add(99 + basicNum);}实现commonjs
const vm = require('vm')const fs = require('fs')const path = require('path')function Module (id) { this.id = id this.exports = {}}Module.wrap = function (script) { let wrapper = ['(function(exports,require,module,dirname,filename){', '})']; return wrapper[0] + script + wrapper[1]}Module._resolveFilename = function(filename) { // 1.先查看你传入的文件是否是正常的, 存不存在如果存在 就加载这个文件 // 2.如果文件不存在，尝试添加.js .json后缀 let filePath = path.resolve(__dirname, filename); let exists = fs.existsSync(filePath); if (exists) return filePath; let keys = Object.keys(Module._extensions) for (let i = 0; i < keys.length; i++) { let concatPath = filePath + keys[i]; // 尝试添加后缀 if (fs.existsSync(concatPath)) return concatPath } throw new Error('module not found');}Module._extensions = {}Module._extensions['.js'] = function(module) { let content = fs.readFileSync(module.id, 'utf8'); let wrapperStr = Module.wrap(content); // 要让内容包装函数 （模块化的解决方案就是包装一层函数） let fn = vm.runInThisContext(wrapperStr); let thisValue = module.exports; // {} // module 里有一个属性 等于 exports // module.exports 和 exports // ***************************************** // let exports = module.exports = {} // exports.a = 'hello' // return module.exports // *********************************** console.log(fn.toString()) fn.call(thisValue,module.exports,req,module,path.dirname(module.id),module.id);}Module._extensions['.json'] = function(module) { let content = fs.readFileSync(module.id, 'utf8'); // 手动将json的结果赋予给 module.exports 属性 module.exports = JSON.parse(content)}// 自定义模块查找的问题 如果没有这个文件，我需要尝试去加载 .js 后缀再去尝试加载.json / .nodeModule._resolveFilename = function(filename) { // 1.先查看你传入的文件是否是正常的, 存不存在如果存在 就加载这个文件 // 2.如果文件不存在，尝试添加.js .json后缀 let filePath = path.resolve(__dirname, filename); let exists = fs.existsSync(filePath); if (exists) return filePath; let keys = Object.keys(Module._extensions) for (let i = 0; i < keys.length; i++) { let concatPath = filePath + keys[i]; // 尝试添加后缀 if (fs.existsSync(concatPath)) return concatPath } throw new Error('module not found');}Module.prototype.load = function() { // 我要加载当前的模块 当前模块就是this let extname = path.extname(this.id); Module._extensions[extname](this); // 设计模式 策略模式}Module._cache = {}function req (id) { const filename = Module._resolveFilename(id); // 转化成绝对路径 // 模块有没有被缓存.. if(Module._cache[filename]){ // 多次引用 返回原来的exports对象 return Module._cache[filename].exports; } let module = new Module(filename); // 根据路径来创建模块 // 缓存模块 module.load(); // 核心就是加载这个模块 让模块中的内容执行，赋予给module.exports // 最终返回的是module.exports Module._cache[filename] = module return module.exports;}