自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class,
作用域也只以函数作为区分。这与早期js的语言定位有关,
作为一个只需要在网页中嵌入几十上百行代码来实现一些基本的交互效果的脚本语言,
确实用不着严格的组织代码规范。但是随着时代的发展,js承担的任务越来越重,
从原先的script引入几十行代码即可的状态变成现在多人协作文件众多的地步,
管理和组织代码的难度越来越大,模块化的需求也越来越迫切。
在此背景下,众多的模块化加载器便应运而生。
模块化规范和实现
前文提到在es6模块化出现之前,为了解决模块化的需求,出现了众多的模块化机制例如cmd,amd等。遵循不同规范有sea.js, require.js等实现。
AMD:
Asynchronous Module Definition 异步模块定义。浏览器端模块化开发的规范,
模块将被异步加载,模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。
AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。require.js详情参考//依赖前置,jquery模块先声明define(['jquery'], function ($) {/***/})
CommonJS:
CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。CommonJS规范参考//同步加载var $ = require('jquery');/****/module.exports = myFunc;
CMD:
CMD(Common Module Definition) 通用模块定义。该规范是SeaJS推广过程中发展出来的。
与AMD区别:
AMD是依赖关系前置,CMD是按需加载。更多参考define(function (require, exports, module) {// 就近依赖var $ = require('jquery');/****/})
UMD:
Universal Module Definition 通用模块规范。
基于统一规范的目的出现,看起来没那么简约,但是支持amd和commonjs以及全局模块模式。//做的工作其实就是这么粗暴,判断当前用的什么就以当前规范来定义(function (root, factory) {if (typeof define === 'function' && define.amd) {// A