前端模块规范主要这几种:CommonJs、AMD、CMD和ES6 module
✔CommonJs
有四个重要的环境变量为模块化的实现提供支持:module、exports、require、global;
主要形式: 用module.exports定义当前模块对外输入的接口(不推荐直接用exports),用require加载模块;
运行环境: 主要用同步方式加载模块运行在服务器(如node)环境
原因: 在服务端,模块文件都存在本地磁盘,读取非常快,所以可以用同步加载方式;而在浏览器端,限于网络问题,更合理方案是使用异步加载,如AMD、CMD
✔AMD
概念: 是 RequireJS 在推广过程中对模块定义的规范化产出
主要形式: require()加载模块,defined()定义模块
执行方式: 推崇 依赖前置(依赖先执行)、提前执行
运行环境: 主要用异步加载方式运行于浏览器环境
✔CMD
概念: 是 SeaJS 在推广过程中对模块定义的规范化产出
执行方式: 推崇依赖就近、延迟执行
主要形式: 和AMD类似\
Tip: 大型项目希望能够按需引入,而不是因为某一功能模块而引入整个插件库。目前主流工具是:AMD规范的RequireJS、CMD规范的SeaJS
✔SeaJS与RequireJS
SeaJS与RequireJS在模块的加载方面是没有差异的,无论是RequireJS在定义模块时 defined() 定义的依赖模块,还是SeaJS在factory函数中require的依赖模块,执行环境都在浏览器端,都是异步并且顺序不可控;
主要差异在于factory函数的执行时机。(factory是主要逻辑函数)
RequireJS喜欢依赖先行,提前执行,而SeaJS喜欢依赖就近,延迟执行。 它们都能够达到依赖的自动加载效果,解决目前打包问题
SeaJS:快速入门www.cnblogs.com/xjchenhao/p…
✔ES6 module
概念: 在语言标准层面实现模块功能,旨在成为浏览器端和服务器端的通用模块解决方案。
主要形式: export(用于规定模块的对外接口)、import(用于输入其他模块提供的功能)、export default(用于模块默认输出)
✔ES6 module和CommonJS的区别
1. CommonJS 模块输出的是一个值的拷贝,是执行脚本时生成的对象(即module.exports属性); 即阶段性赋值,当值变化,影响不到之前的引用值;ES6 模块输出的是值的引用,是接口对外的静态定义,值变化可以影响之前的引用值。
2. CommonJS 模块是运行时(脚本执行时) 加载,ES6 模块是编译时输出接口