首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >模块化之AMD、CMD、UMD、commonJS

模块化之AMD、CMD、UMD、commonJS

作者头像
wade
发布2020-04-24 17:11:15
6500
发布2020-04-24 17:11:15
举报
文章被收录于专栏:coding个人笔记coding个人笔记

做后台的对模块化的思想很清晰,都是类、继承什么的,而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怎么使用,就自行查找资料。

(完)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-04-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档