写这篇文章的目的主要是为了扫盲与方便记忆,听说过太多种 JavaScript 中的模块化标准了,导致偶尔会混淆。所以干脆将他们都罗列出来,当做记录手册,什么时候又混淆了就拿出来看看。【这篇文章没有任何技术含量,仅仅是当做工作手册用,大家就看个乐呵】
JavaScript 现有的模块化标准有:CommonJS、AMD、CMD、ES6 模块化。
CommonJS
已知 webpack、nodeJS 是遵循 CommonJS 的。
引入语法:
var math = require('math');
。暴露语法:exports.increment = function (val) {}
。【也可以用 module.exports,module.exports === exports】
AMD
由于 CommonJS 的 require 引用模块是同步到的,会堵塞后面的代码。即使在浏览器中也无法将引用任务置入异步任务队列中。所以 CommonJS 只适合服务端,在浏览器端是不可行的。
所以我们急需异步加载的模块化能力。所以 AMD 也就出来了。
引入语法:
define(id, [depends], factory);
,暴露语法:require([module], callback);
require.js 就是使用的 AMD 语法。只要我们在 html 文件中用 script
引入这个 require.js 文件,我们的前端项目就可以异步加载模块了。
这是历史性的一大步,在浏览器端要想模块化不再是使用简陋的 script
标签引入全局变量了,而是有了更加优雅的模块化方式。【也就是说原生的 html 是具有模块化功能的,后面引用的 js 文件可以使用前面引用的 js 文件的内容,只是这个方式太过简陋了】
但为什么我们现在的项目里似乎都没有听说过有用 require.js 呢?
这是因为因为 webpack 等打包编译工具的支持,使得我们能够在浏览器端直接写 es6 模块化语法了【切记,浏览器端是无法识别 es6 的模块化语法,不过因为 webpack 会将我们模块化代码编译成浏览器看的懂的代码,所以我们才能在项目中写 es6 模块化代码的】。
CMD
也是一种异步加载模块的方式,其中 sea.js 使用的就是 CMD 语法。
引入 / 暴露语法:
define(function(require,exports,module){...});
【在定义模块的同时引入模块】
ES6
相信大家最熟悉的模块化应该就是 ES6 的模块化了。
引入:
import _ from 'loadash'
。暴露语法:export {}