我们用模块化的思想进行网页的编写是为了更好的管理我们的项目,模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能。
一、服务器和桌面环境中的Javascript代码模块化:CommonJS Modules/2.0 规范,特点是同步加载。
CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目,比如服务器和桌面环境中。CommonJS规范是为了解决JavaScript的作用域问题而定义的模块形式,可以使每个模块在它自身的命名空间中执行。该规范的主要内容是:模块必须通过 module.exports导出对外的变量或接口,通过require()来导入其他模块的输出到当前模块。CommonJS是同步加载模块,Node是服务端语言,遵循的是CommonJS规范,同步加载模块,例如:
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
优点:
1.服务器端便于重用
2.NPM中已经将近20w个模块包
3.简单并容易使用
缺点:
1.同步的模块方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
2.不能非阻塞的并行加载多个模块
二、浏览器环境中的Javascript代码模块化:AMD和CMD规范,特点是异步加载。
1.AMD: define + require
对应的实现是 require.js (模块加载器),特点是依赖前置,推崇复用接口,不符合通用的模块思维方式,是一种妥协的实现。
2.CMD: exports + require
对应的实现是 sea.js (模块加载器),特点是依赖就近(相当于按需加载),推崇单用接口。
3.ES6: export + import
由于ES6本身是原生语言支持实现的模块化,但是现代浏览器大多都还未支持,因此必须使用相应的编译工具转换成ES5的AMD,CMD模块,再借助于systemjs/requirejs等模块加载器才能使用。其中ES6的编译一般是用babel,他的作用是可以使用ES6及更高版本,无需等待浏览器支持。
4.webpack:
webpack 是一个预编译的JavaScript ES6 模块打包器,由于是预编译的,不需要在浏览器中加载解释器。在本地直接写JS,不管是AMD/CMD/ES6风格的模块化,它都能认识,并且编译成浏览器认识的JS。