最受关注的大型样板项目路演现场，百度智能云千帆AI加速器首个Demo Day已拉开帷幕！
06-18
模块化是指将一个复杂的系统一一分解为模块。模块化开发的优点：（1）代码复用让我们更容易管理代码，也方便后续代码的修改和维护。
(2) 单独的文件是一个模块，一个单独的作用域，它只暴露特定的变量和函数。这样可以避免污染全局变量，减少变量命名冲突。
Node.js 模块化规范包括：CommonJS、AMD、CMD 和 ES6 模块系统。本文将依次介绍各个规格。
0.早期：使用script引入js模块代码语言：javascript copy 缺点 (1)加载时会停止渲染网页。引入的js文件越多，网页失去响应的时间就越长； (2)会污染全局变量； (3) js文件之间存在依赖关系，加载是有顺序的，最依赖的应该最后加载；当项目规模较大时，依赖关系变得复杂。
(4)引入的js文件太多，不美观，代码难以管理。 1. CommonJS规范是服务器端模块的规范，由nodejs推广和使用。
这个规范的核心思想是让模块通过require方法同步加载自己依赖的其他模块，然后通过exports或者module.exports导出需要暴露的接口。 CommonJS还可以细分为CommonJS1和CommonJS2。
不同的是CommonJS1只能通过exports.xx = xx导出。 CommonJS2在CommonJS1的基础上增加了 module.exports = xx 导出方法。
CommonJS通常指CommonJS2。使用 CommonJS 规范导入导出： 代码语言：javascript copy // Export module.exports = moduleA.someFunc; // 导入 const moduleA = require('./moduleA');示例：代码语言：javascript copy //math.jsvar num = 0;function add(a, b) { return a + b;}module.exports = { //需要对外暴露的变量和函数 num: num, add: add} 可以这样加载： 代码语言: javascript copy //引入自定义模块时，参数包含路径，可以省略.js //引入核心模块时，不需要包含路径，如 var http = require("http");var math = require('./math') ;math.add(1, 2)//3 其实从上面的例子可以看出，math. add(1,2)必须等待math.js加载完毕，即require是同步的。
在服务器端，模块文件保存在本地磁盘上，等待时间就是磁盘读取时间。但对于浏览器来说，由于模块放置在服务器端，因此等待时间取决于互联网的速度。
因此，更合理的解决方案是异步加载模块。缺点：（1）模块无法并行加载，会阻塞浏览器加载； （2）代码不能直接在浏览器环境运行，必须通过工具转换为标准ES5； 2.AMD和require.jsAMD：异步模块定义。
如上所述，CommonJS 是服务器端模块的规范。主要是为了后端JS的性能而制定的，不太适合前端。
AMD希望为前端JS的性能制定标准。由于原生不支持JavaScript，使用AMD规范的页面开发需要使用相应的库函数，即require.js（还有一个js库：curl.js）。
其实AMD就是require.js推广过程中模块定义的标准化输出。 AMD采用异步方式加载模块，模块的加载不影响后续语句的执行。
所有依赖于该模块的语句都在回调函数中定义。直到加载完成后，该回调函数才会运行。
require.js 也使用 require() 语句来加载模块，但与 CommonJS 不同： 代码语言： javascript copy // 定义一个模块 define('module', ['dep'], function (dep) { returnexports ;}); //导入并使用 require(['module'], function (module) {});将上面例子中的代码重写为AMD形式： math.js 定义了一个模块： 代码语言： javascript copy Define('math', [ 'jquery'], function (jquery) {//引入 jQuery 模块 return { add:函数 (x, y) { 返回 x + y; } };});导入和使用：代码语言：javascript copy require(['math'], function (math) { math.add(1, 2)})math.add() 与加载 math 模块不同步，不会阻塞浏览器的加载。 3.CMD和sea.jsCMD：公共模块定义。
国内老大宇博写的是sea.js。其实CMD就是sea.js推广过程中模块定义的标准化输出。
代码语言：javascriptcopydefine(function(require,exports,module){ //模块代码});描述：require：可以从其他模块导入的参数； Exports：可以导出模块中的一些属性和方法；module：是一个对象，存储了与当前模块相关的一些属性和方法。将上面示例中的代码重写为 AMD 形式： 代码语言：javascript copy Define(function (require,exports, module) { var add = function (a, b) { return a + b; }exports.add = add; }) //导入并使用seajs.use(['math.js'], function (math) { var sum = math.add(1, 2);}); CMD和AMD的区别在于：（1）AMD建议Dependency预定位； CMD 建议就近使用依赖，仅在使用某个模块时需要： 代码语言：javascript copy //AMD 建议依赖前置：定义模块时，必须声明要依赖的模块 Define( [' a', 'b', 'c', 'd'], function (a, b, c, d) { // 依赖项必须写在开头 a.doSomething() // 此处省略该行。
. b.doSomething() ...})//CMD 建议将依赖项保留在附近并按需加载。仅当使用某个模块时，requiredefine(function (require,exports,modules) { var a = require('a'); a.doSomething(); // 省略这里的行... var b = require(" b");//加载 b.doSomething(); ...})(2)AMD 的 默认情况下，一个 API 可以被多个用户使用。
CMD的API严格区分，建议单一职责。对于依赖模块，AMD提前执行，CMD延迟执行。
具体详情请点击参考 4.ES6模块化 ES6在语言层面实现了模块化。浏览器供应商和 Node.js 都宣布了对该规范的原生支持。
它将逐步取代CommonJS和AMD规范，成为浏览器和服务器的通用模块解决方案。在ES6中，使用export关键字导出模块，使用import关键字引用模块。
不过浏览器还没有完全兼容，需要使用babel转换为ES5。代码语言：javascript copy //导出导出函数hello(){};导出默认值 { // ...}; // 导入 import { readFile } from 'fs';从“反应”导入反应；使用import导入模块时，需要知道要加载的变量名或函数名。
ES6还提供了export default，它指定模块的默认输出。导入相应模块时，不需要使用大括号。
将上面例子中的代码重写为ES6形式： 代码语言：javascript copy //math.jsvar num = 0;var add = function (a, b) { return a + b;};export { num, add }; // 导入 import { num, add } from './math'; function test(ele) { ele.textContent = add(1 + num);} 缺点：浏览器尚未完全兼容，必须通过工具转换为标准 ES5。正常运行。
5.总结本文从通过脚本引入js文件开始，到服务器端模块规范CommonJS，再到倡导依赖前端的浏览器端模块的规范AMD，以及倡导依赖前端的CMD规范在附近的浏览器端模块上。最后介绍了ES6的模块化。
每个介绍都包括每个规范的基本用法和示例。如有疑问，请指正。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-18
06-18
06-17
最新文章
【玩转GPU】ControlNet初学者生存指南
【实战】获取小程序中用户的城市信息（附源码）
包雪雪简单介绍Vue.js：开学
Go进阶：使用Gin框架简单实现服务端渲染
线程池介绍及实际案例分享
JMeter 注释 18 - JMeter 常用配置组件介绍
基于Sentry的大数据权限解决方案
【云+社区年度征文集】GPE监控介绍及使用