JavaScript中的模块化

JavaScript在es6之前,本身并不支持模块化,随着前端项目的日益复杂化,大型化,让JavaScript不得不做模块化.现在主要有如下模块化解决方案:

这里不讨论各个模块化解决方案的使用,而是讨论区别是应用场景等

  • AMD(require.js)
  • CMD(sea.js)
  • Common.js(node.js支持)
  • UMD
  • ESM(es6官方支持)

1. AMD和CMD



AMD和CMD是JavaScript中出现较早的模块化解决方案,且都服务于浏览器端,因此放在一起看.

AMD(Asynchronous Module Definition),采用异步加载模块,主要服务于浏览器端.
CMD(Common Module Definition),主要服务于浏览器端.

区别
  1. 加载和执行顺序不同
    AMD官方推荐依赖前置加载并执行,而后执行模块内容; 2.0后也支持就近加载,但是依然不是官方推荐.
    CMD推荐就近加载.
  2. 对第三方库友好度
    CMD的实现sea.js取义海纳百川,不强行要求别的库遵循CMD标准,但是能很好的兼容之.本人经过项目实践,觉得优于require.js.
    AMD不那么友好

2.CommonJS



CommonJS主要服务于服务端,目前node.js支持CommonJS.
CommonJS同步加载模块,一个单独的文件就是一个模块,输出的是一个值的拷贝.

3.UMD



UMD是是AMD和CommonJS的结合.先判断是否是Node.js环境(node支持的exports是否存在), 在判断是否是AMD环境

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.libName = factory());
}(this, (function () { 'use strict';})));

4.ESM



es6推出的JavaScript模块化标准.
使用类似类型化语言的import和export
是静态化的模块系统,输出值只是一个引用,利于做代码静态分析.

5.ESM和CommonJS区别


  1. 最大的区别是ESM输出值的引用,CommonJS输出值的拷贝; 意味着ESM模块内部变化,会影响外部使用. 但是CommonJS模块内部变化不会影响外部.这也造成了两者巨大的冲突,在node.js中很难兼容,在node.js中只能用mjs后缀来区分使用两者.
  2. ESM静态编译,CommonJS运行时加载.
  3. ESM的import和export会变量提升,优先到头部执行; 但是CommonJS不会变量提升.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript中的模块化将代码组织到一个类中的重要原因是,让代码更加“模块化”,可以实现重用。但类不是唯一的...
    河的左岸阅读 84评论 0 1
  • 我时常做梦 梦醒后总记不得 那些光怪陆离的瞬间 大概合上眼 这世界就与你无关
    傻小肆阅读 98评论 0 0
  • 今日观点:所有的产品都可以实现“体验化”。三个步骤:一是让产品做到感官化,添加一些比如颜色、声音、造型等感觉触发元...
    帅气还是真帅的阅读 470评论 0 0
  • 逻辑回归如何解决过拟合问题?过拟合大部分原因是由于特征过多导致的,我们可以使用以下两种方法来解决过拟合的问题。 减...
    b0591d0dc6ba阅读 4,433评论 0 6
  • 日精进,今日体验:在维修过程中遇到的问题,就是想到要成长过程。把心态摆正,一点点想这件事的关联。
    隆非凡阅读 118评论 0 0