美文网首页Node程序员
JS模块化规范:AMD,CMD,CommonJS和ES6

JS模块化规范:AMD,CMD,CommonJS和ES6

作者: super_wei | 来源:发表于2019-02-22 19:52 被阅读0次

之前公司开发的某个大数据产品,所有的功能都集中在了一个页面里面,久而久之就造成了页面加载卡顿大大影响了体验效果;后来引用了RequireJS来进行模块化的开发来解决这个问题;不管从前后端未分离的RequireJS还是使用Node开发的CommonJS,模块化开发无处不在,模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露它的接口。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。那么在众多模块化开发方案当中我们应该使用哪种方案?

原始方法

<script>标签

这是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在window对象中,不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口。

这种原始的加载方式暴露了一些显而易见的弊端:

全局作用域下容易造成变量冲突

文件只能按照<script>的书写顺序进行加载

开发人员必须主观解决模块和代码库的依赖关系

在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪

一、CommonJS

我们在使用Node开发程序的时候,这个程序由很多个模块组成,每一个模块都是一个文件(一个单独的作用域)。Node模块采用的就是CommonJS规范,该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过  module.exports 来导出需要暴露的接口。

CommonJS是服务端的JS规范,上面提到了每个文件都是一个作用域,在该模块内部定义的变量其他模块没有办法读取的到,除非定义为global对象的属性,

输出模块: 每个模块只有一个出口, module.export对象,我们把想要输出的模块放入里面;

加载模块: 加载一个模块的时候我们采用require方法,这个方法会读取一个文件并返回文件内部的module.export对象;

CommonJS模块的特点如下。

1、所有代码都运行在模块作用域,不会污染全局作用域。

2、模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。

3、NMP中已经有将近20万个可以使用模块包

缺点:

1、同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,

2、浏览器资源是异步加载的不能非阻塞的并行加载多个模块

 CommonJs所加载的模块一般都已经存在本地的硬盘里面,当我们执行某个文件的时候会一同加载文件里面require所引入的文件,加载起来非常快,不要考虑异步加载的方式。 但是这个只是在于服务器端,如果是浏览器端,要从服务器加载模块就必须采用异步的方式,于是乎就有了AMD CMD的解决方案;

二、AMD

Asynchronous Module Definition( 异步模块定义)。它是一个在浏览器端模块化开发的规范。它不是javascript原生支持,所以使用AMD规范进行页面开发需要用到对应的库,也就是RequireJS,AMD其实是RequireJS在推广的过程中对模块定义的范围化的产出。

它的实现方案是:先定义所有依赖,然后在加载完成后的回调函数中执行。

AMD是预加载, 只有一个接口:define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,注意的是这些依赖文件并没有书写顺序的区别;

但是开始就把所有依赖写出来是不符合书写的逻辑顺序的,能不能像commonJS那样用的时候再require,而且还支持异步加载后再执行呢?

优点:

适合在浏览器环境中异步加载模块

可以并行加载多个模块

缺点:

提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不顺畅

不符合通用的模块化思维方式,是一种妥协的实现

三、CMD

CMD是另一种js模块化方案,它与AMD很类似,不同点在于:AMD 推崇依赖前置、提前执行,CMD推崇依赖就近、延迟执行。

Common Module Definition(CMD),  是seajs推崇的规范,CMD则是依赖就近,用的时候再require。CMD 推崇 as lazy as possible(尽可能的懒加载,也称为延迟加载,即在需要的时候才加载)。

AMD 和 CMD 的书写区别:

AMD依赖前置,在定义模块时就声明其所要依赖的模块

CMD是按需加载依赖,在用到那个模块再去require

AMD在使用前就准备好,CMD是用到了再去准备模块

优点:

1、依赖就近,延迟执行

2、可以很容易在 Node.js 中运行

缺点:依赖 SPM 打包,模块的加载逻辑偏重


现在我们再来说说ES6标准的模块化:

ES6静态加载的设计思想,使得在编译时就可以确定模块的依赖关系,以及输入、输出的变量。ES6则在语言层面上实现了模块化,取代CommonJS、AMD、CMD成为服务端和浏览器端通用的模块解决方案。(CommonJS、AMD、CMD运行时确定依赖关系)

ES6模块和CommonJS的区别

CommonJS模块输出是值的拷贝,ES6模块输出是值的引用(引用时可能修改到模块的值)

CommonJS是运行时加载,ES6模块是编译时加载

ES6 Module是ES6中规定的模块体系,相比上面提到的规范, ES6 Module有更多的优势,ES6模块化的特点:

静态加载,编译时确定依赖关系

1、自动运行于严格模式之下

2、export关键字导出

3、import关键字导入

4、同步、异步加载均可

CommonJS与ES6 Module的区别:

1、CommonJS模块是运行时加载,ES6 Module是编译时输出接口

2、CommonJS加载的是整个模块,将所有的接口全部加载进来,ES6 Module可以单独加载其中的某个接口;

3、CommonJS输出是值的拷贝,ES6 Module输出的是值的引用,被输出模块的内部的改变会影响引用的改变;

4、CommonJS this指向当前模块,ES6 Module this指向undefined;

优点:

容易进行静态分析

面向未来的 EcmaScript 标准

缺点:

原生浏览器端还没有实现该标准

全新的命令字,新版的 Node.js才支持

目前浏览器对ES6 Module兼容还不太好,我们平时在webpack中使用的export/import,会经过babel转换为CommonJS规范。

具体可以参考:潜入理解ES6-模块化
                         时光机-《说说require 和 import 的区别》

相关文章

  • js模块化

    js的模块化大致分为4种规范 amd cmd commonjs 和es6模块化 1.amd规范 amd规范又叫异步...

  • js模块化规范

    一、js模块化1、模块化规范: script CommonJS AMD CMD ES6 modules 2、scr...

  • JS模块化

    模块化规范:CommonJS,AMD,CMD,UMD,ES6 Module CommonJS CommonJS是服...

  • js 模块化规范的进展

    js模块化规范有:CommonJS、AMD、CMD、ES6的模块系统。 0.早期:用script来引入js模块 缺...

  • js模块化

    首先梳理一下模块化的发展情况~ 无模块化-->CommonJS规范-->AMD规范-->CMD规范-->ES6模块...

  • 一次性搞懂 CommonJS, AMD, CMD 等模块化规范

    1 常见的模块化规范 CommonJs (Node.js) AMD (RequireJS) CMD (SeaJS)...

  • 前端模块化:ES6,CommonJS

    前端模块化 共有四种规范 ES6 Module CommonJS AMD CMD ES6 Module ES6模块...

  • 前端工程化的一些理解

    一、模块化 主要是js模块化,可以使用CommonJS、AMD、CMD等模块化规范,其中的区别是CommonJS对...

  • js模块化学习笔记二:模块化规范

    常见的模块化规范有:CommonJS、AMD、CMD、ES6 一、CommonJS 1).实现 服务器端:Node...

  • 归档

    AMD、CMD、CommonJs、ES6的对比 他们都是用于在模块化定义中使用的,AMD、CMD、CommonJs...

网友评论

    本文标题:JS模块化规范:AMD,CMD,CommonJS和ES6

    本文链接:https://www.haomeiwen.com/subject/ufbsyqtx.html