博客

ES6模块和CommonJS规范区别

①CommonJS支持动态导入，ES6不支持，是静态编译。

②CommonJS同步加载，用于服务端，文件放在本地磁盘，读取速度快。同步导入卡住主线程也并无影响。ES6是异步加载，用于浏览器端，不能同步加载，会导致页面渲染，用户体验差。

③CommonJS模块输出的是值拷贝，内部的变化影响不到值的变化。ES6模块输出的是值引用，原始值变化，加载的值也会跟着变化，ES6模块是动态引用，并且不会缓存值。

④CommonJS模块是运行时加载，ES6模块是编译时输出接口。CommonJS模块就是对象，输入时先加载整个模块，生成一个对象，然后从对象读取方法。ES6模块不是对象，export输出指定代码，import导入加载某个值，而不是整个模块。

⑤关于模块顶层的this指向问题，在CommonJS顶层，this指向当前模块；而在ES6模块中，this指向undefined。

⑥ES6模块当中，是支持加载CommonJS模块的。但是反过来，CommonJS并不能requireES6模块，在NodeJS中，两种模块方案是分开处理的。

什么是循环引用？循环加载指的是a脚本的执行依赖b脚本，b脚本的执行依赖a脚本。

①CommonJS模块是加载时执行。一旦出现某个模块被“循环加载”，就只输出已经执行的部分，没有执行的部分不会输出。

②ES6模块对导出模块，变量，对象是动态引用，遇到模块加载命令import时不会去执行模块，只是生成一个指向被加载模块的引用



commonjs:

每个文件都可作一个模块

在服务器端：模块的加载是运行时同步加载的

在浏览器端：模块需要提前编译打包处理

暴露模块：①module.exports=value ②exports.xxx=value

引入模块：require(xxx) 第三方模块：xxx为模块名 自定义模块：xxx为模块的文件路径

cmd 规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作，AMD规范则是非同步加载模块，允许指定回调函数，由于node.js 主要用于服务器编程，模块文件一般已经存在本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以commonJS比较适用，但是，如果是浏览器环境，要从服务器端加载模块，这时候必须采用非同步模式了，因此浏览器端一般采用AMD规范

1.AMD异步模块定义

RequireJS：是一个AMD框架，可以异步加载JS文件，按照模块加载方法，通过define()函数定义，第一个参数是一个数组，里面定义一些需要依赖的包，第二个参数是一个回调函数，通过变量来引用模块里面的方法，最后通过return来输出。

2.CMD同步模块定义

SeaJS：是一个CMD框架。通过define()定义，没有依赖前置，通过require加载jQuery插件，CMD是依赖就近，在什么地方使用到插件就在什么地方require该插件，即用即返，这是一个同步的概念。

define(function(require,exports,module){


var $=require(‘jquery’)

var Spinning=require(“./spnning”)

})

3.commonJS–后端使用的规范、同步加载模块

commonJS规范和require，import区别 – 知乎

是通过module.exports定义的，在前端浏览器里面并不支持module.exports,通过node.js后端使用的。Nodejs端是使用CommonJS规范的，前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的。

同步的模块方式不适合不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的

不能非阻塞的并行加载多个模块

CommonJS模块的加载机制是，输入的是被输出的值的拷贝，即一旦输出一个值，模块内部的变化就影响不到这个值

4.ES6

export、import

export 与 export default 均可用于导出常量、函数、文件、模块等 在一个文件或模块中，export、import可以有多个，export default 仅有一个 通过 export 方式导出，在导入时要加 { } ， export default 则不需要 export 能直接导出变量表达式， export default 不行。

5.CommonJs和ES6 Module的区别

CommonJs的exports导出的是变量的拷贝（浅拷贝），ES6 Module导出的是变量的只读引用。CommonJs所有代码都运行在模块作用域，不会污染全局作用域。

CommonJs模块只会在第一次加载时运行一次，以后再加载，就直接读取缓存结果。ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值。

CommonJs的导入是同步的，模块加载的顺序是导入的顺序。ES6是异步加载的。因此CommonJs适用于模块存储于本地的后端程序，ES6适用于需要向服务器申请资源的前端代码。

CommonJs的导入导出非常简单，导入只有一种方式，导入的内容是module.exports属性的所有内容。ES6的导出有默认暴露、分别暴露、统一暴露三种，对应着有不同的导入方式，更加灵活。

CommonJs的this是当前模块，ES6 Module的this是undefined。

/*ES6   import*/
//引入js资源
import $ from 'jquery'  // 需要先按照 jquery，  npm install jquery -g
//引入样式资源、图片、字体等资源 
import './xxx/xxx.css'