模块化之AMD、CMD、UMD、commonJS

做后台的对模块化的思想很清晰,都是类、继承什么的,而JavaScript早期开始就没有包、类模块的概念,甚至只有函数作用域。

我理解的模块就是实现特定功能的文件或者代码,模块化就是隔离、组织这些复杂功能代码。模块可以让我们更方便的加载不同的功能。

现在还有什么组件化、插件化,我觉得都是模块化思想。比如登录是模块、搜索是模块、订单是模块,UI库的吐司是组件、select是组件、pick是组件,jq的时间插件、视屏插件。这三者具体怎么区分还真不知道怎么去描述,但是我觉得思想都是一样的。

模块化的优点:

避免变量污染、命名冲突

提高代码复用率

提高可维护性

方便依赖管理

这些优点应该是不需要解释吧,一看就能知道了。

早之前JavaScript的模块化有以下几种:

函数:每一个函数就是一个模块

对象:一个模块就是一个对象,有属性有方法

立即执行函数:跟函数原理一样

而模块化有一个重点就是规范,不能各自写各自的,需要统一使用一个规范,现在主流的几个模块化规范:commonJS、AMD、CMD、UMD

CommonJS:

这应该是最早的JavaScript模块化编程,主要是用于服务端,nodeJS就是使用commonJS,我们最常用的webpack也是使用commonJS。CommonJS规范中一个文件就是一个模块,通过exports暴露模块内的内容,通过require加载模块使用,且commonJS是同步的,因为在服务端文件就在本地,可以不用考虑异步。

AMD(Asynchronous Module Definition):

CommonJS出来之后,由于是同步,浏览器并不适合,我们不可能等所有都加载完成才显示页面。于是AMD规范就出来了。AMD是requireJS推广过程的规范产出,支持异步,所以AMD也是通过require加载模块目前主要有两个Javascript库实现了AMD规范:require.js和curl.js。

CMD(Cmomon Module Definition):

CMD是大神玉伯提出的,然后根据这个规范写了个seaJS。因为AMD想兼容浏览器和后台,所以大神就搞了个专注于浏览器的CMD。要说requireJS和seaJS最大的区别就是加载的机制:

SeaJS只会在真正需要使用(依赖)模块时才执行该模块

RequireJS会先尽早地执行(依赖)模块, 相当于所有的require都被提前了

UMD(Universal Module Definition):

通用模块定义,兼容AMD和commonJS的规范,也就是AMD和commonJS的一个糅合。AMD异步加载,commonJS同步加载,而UMD就是判断环境,有nodejs模块(require)就使用commonJS,有AMD模块(define)就使用AMD。

ES6:

ES6提供了模块化export和import的实现。可以说ES6模块化的实现是替代UMD,服务器和浏览器都会实现ES6的模块化。

最后总结一下:

CommonJS:同步加载,适用于服务器,node、webpack使用;

AMD:异步加载,浏览器使用,实现的requireJS想兼容服务器和浏览器,预加载。

CMD:异步加载,专注于浏览器,实现的是seaJS,玉伯大神提出的,使用时加载。

UMD:AMD和commonJS的结合,可以服务端使用也可以浏览器使用。

ES6:语言标准的模块化,取代UMD,服务器和浏览器都能使用。

只是分享一下这几个规范的大致理解,至于requireJS、seaJS怎么使用,就自行查找资料。

Coding 个人笔记

猜你喜欢

转载自blog.csdn.net/wade3po/article/details/89703250