ES6模块加载方案 CommonJS和AMD ES6和CommonJS

巜巜

已于 2022-03-28 18:14:14 修改

阅读量2.1k

点赞数

分类专栏： ES6深入系列文章标签： es6

于 2022-03-28 18:10:15 首次发布

本文链接：https://blog.csdn.net/weixin_49739911/article/details/123801776

版权

ES6深入系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

exports和module.exports

CommonJS

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见；
CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性；
require方法用于加载模块。

CommonJS和AMD的对比

CommonJS一般用于服务端比如node,AMD一般用于浏览器环境，并且允许非同步加载模块，可以根据需要动态加载模块；
CommonJS和AMD都是运行时加载。

ES6和CommonJS

CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用；
CommonJS模块是运行时加载，ES6模块是编译时输出接口。因为CommonJS加载的是一个对象，（即module.exports属性），该对象只有在脚本运行时才会生成，而ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

// 输出模块 counter.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
    counter: counter,
    incCounter: incCounter,
};
// 引入模块 main.js
var mod = require('./counter');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

// 输出模块 counter.js
var counter = {
    value: 3
};

function incCounter() {
    counter.value++;
}
module.exports = {
    counter: counter,
    incCounter: incCounter,
};
// 引入模块 main.js
var mod = require('./counter.js');

console.log(mod.counter.value); // 3
mod.incCounter();
console.log(mod.counter.value); // 4

value 是会发生改变的。不过也可以说这是 "值的拷贝"，只是对于引用类型而言，值指的其实是引用。

改成ES6

// counter.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from './counter';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

exports和module.exports

在node.js中模块导出内容时，exports和module.exports之间的区别（exports就是 module.exports 的引用）。就是node.js 一个模块引入另一个模块的变量的时候就是获取的 module.exports上导出的内容。所以如果你是通过exports这种形式去导出的内容，那么在main.js里面也有是获取exports这个对象上某个属性的内容，在child.js里面改变了这个属性的内容，那么main.js也会有变化；

这里可以理解为webpack最后编译出来的代码有一套自己的模块系统，如果是同一个chunk的不同模块当然是同步加载的，如果你在源码当中使用了webpack提供的异步加载模块的语法，例如：import（xxx）,require.ensure等，那么对应的模块也就会被异步加载了。

函数防抖：就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。

函数节流：就是指连续触发事件但是在n秒钟只执行一次函数，让一个函数无法在很短的时间间隔内连续调用，而是间隔一段时间执行，这在我们为元素绑定一些事件的时候经常会用到，比如我们为window绑定了一个resize事件，如果用户一直改变窗口大小，就会一直触发这个事件处理函数，这对性能有很大影响。

防抖是事件持续触发，但只有等事件停止触发后n秒才执行函数，节流是持续触发的时候，每n秒执行一次函数。

总结：这是因为ES6模块的运行机制与CommonJS不一样，JS引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值，换句话说，ES6的import有点像“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。