浅谈Common.js AMD 和CMD、ES6 module以及SeaJS、RequireJS✨

516 阅读2分钟

前端模块规范主要这几种: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

SeaJSRequireJS

SeaJSRequireJS在模块的加载方面是没有差异的,无论是RequireJS在定义模块时 defined() 定义的依赖模块,还是SeaJS在factory函数中require的依赖模块,执行环境都在浏览器端,都是异步并且顺序不可控;

主要差异在于factory函数的执行时机。(factory是主要逻辑函数)

RequireJS喜欢依赖先行,提前执行,而SeaJS喜欢依赖就近,延迟执行。 它们都能够达到依赖的自动加载效果,解决目前打包问题

SeaJS:快速入门www.cnblogs.com/xjchenhao/p…

✔ES6 module

概念: 在语言标准层面实现模块功能,旨在成为浏览器端和服务器端的通用模块解决方案。

主要形式: export(用于规定模块的对外接口)、import(用于输入其他模块提供的功能)、export default(用于模块默认输出)

image.png

✔ES6 module和CommonJS的区别

1.  CommonJS 模块输出的是一个值的拷贝,是执行脚本时生成的对象(即module.exports属性); 即阶段性赋值,当值变化,影响不到之前的引用值;ES6 模块输出的是值的引用,是接口对外的静态定义,值变化可以影响之前的引用值。

2.  CommonJS 模块是运行时(脚本执行时) 加载,ES6 模块是编译时输出接口