乐趣区

关于JavaScript中存在的模块化标准总结

​ 写这篇文章的目的主要是为了扫盲与方便记忆,听说过太多种 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 {}

退出移动版