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

目录

CommonJS

CommonJS和AMD的对比

ES6和CommonJS

 改成ES6

exports和module.exports 


CommonJS

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

CommonJS和AMD的对比

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

ES6和CommonJS

  1. CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值的引用;
  2. 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模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

你可能感兴趣的:(ES6深入系列,es6)