commonJs规范，ES6规范 exports require import 使用

小鱼儿 2022-10-15 13:59 274阅读 0赞

ES6模块运行机制完全不一样，JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行的时候，再根据这个只读引用，到被加载的那个模块里去取值。  
CommonJS输出的是值的拷贝，换句话说就是，一旦输出了某个值，如果模块内部后续的变化，影响不了外部对这个值的使用。CommonJS其实加载的是一个对象，这个对象只有在脚本运行时才会生成，而且只会生成一次

模块化解决的问题是：
    - 加载顺序
    - 污染全局
    
    commonJs规范： 
    同步加载，引用进来后变成立即执行函数
    exports 
    module.exports
    require()
    
    AMD
    异步
    
    CMD
    依赖就近 按需加载
    
    ES6规范：
    export 
    import { xxx } from './components'
    
    export default {}
    import xxx from './components'
    
    @import   " "

#### 总结 ####

> 写到这里，本文也就基本结束了。我们总结一下文中涉及到的内容：

1.  因为CommonJS的require语法是同步的，所以就导致了CommonJS模块规范只适合用在服务端，而ES6模块无论是在浏览器端还是服务端都是可以使用的，但是在服务端中，还需要遵循一些特殊的规则才能使用 ；
2.  CommonJS 模块输出的是一个值的拷贝，而ES6 模块输出的是值的引用；  
    CommonJS 模块是运行时加载，而ES6 模块是编译时输出接口，使得对JS的模块进行静态分析成为了可能；
3.  因为两个模块加载机制的不同，所以在对待循环加载的时候，它们会有不同的表现。
4.  CommonJS遇到循环依赖的时候，只会输出已经执行的部分，后续的输出或者变化，是不会影响已经输出的变量。而ES6模块相反，使用import加载一个变量，变量不会被缓存，真正取值的时候就能取到最终的值；
5.  关于模块顶层的this指向问题，在CommonJS顶层，this指向当前模块；而在ES6模块中，this指向undefined；
6.  关于两个模块互相引用的问题，在ES6模块当中，是支持加载CommonJS模块的。但是反过来，CommonJS并不能requireES6模块，在NodeJS中，两种模块方案是分开处理的。

#### 一、区别： ####

1.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

2.CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

3.CommonJS是对模块的浅拷⻉，ES6 Module是对模块的引⽤,即ES6 Module只存只读，不能改变其值，具体点就是指针指向不能变，类似const 。

4.import的接⼝是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针指向，但可以改变变量内部指针指向。可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错。

#### 二、共同点： ####

1.CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值，即对对象内部属性的值进⾏改变。