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模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

ES6模块加载方案 CommonJS和AMD ES6和CommonJS相关推荐

ES6 模块加载export 、import、export default 、import() 语法与区别，笔记总结
ES6模块加载export .import.export default .import() 语法与区别在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种. ...
ES6 系列之模块加载方案
前言本篇我们重点介绍以下四种模块加载规范: AMD CMD CommonJS ES6 模块最后再延伸讲下 Babel 的编译和 webpack 的打包原理. require.js 在了解 AMD ...
es6 循环加载ES6模块
循环加载ES6模块 "循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本. // a.js var b = requir ...
es6 Node加载
Node加载概述 Node 对 ES6模块的处理比较麻烦,因为它有自己的 CommonJS模块格式,与 ES6模块格式是不兼容的.目前的解决方案是,将两者分开,ES6模块和 CommonJS 采用各 ...
Javascript模块加载捆绑器Browserify Webpack和SystemJS用法
Javascript模块加载捆绑器Browserify Webpack和SystemJS用法转自 http://www.jdon.com/idea/js/javascript-module-load ...
javascript 异步模块加载简易实现
在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...
nodejs学习巩固笔记-nodejs基础，Node.js 高级编程（核心模块、模块加载机制）
目录 Nodejs 基础大前端开发过程中的必备技能 nodejs 的架构为什么是 Nodejs Nodejs 异步 IO Nodejs 事件驱动架构全局对象全局变量之 process 核心模块 ...
Node.js（一、Node.js基础、模块加载机制、包等）
Node.js(一.Node.js基础.模块加载机制.包等) 1.Node.js基础 1.1.Node是什么 1.2.Node环境安装失败解决方法 1.2.1.Node环境搭建 1.2.2.错误代码2 ...
javascript模块化、模块加载器初探
最常见网站的javascript架构可能是这样的: 一个底层框架文件,如jQuery 一个网站业务框架文件,包含整站公用业务模块类(如弹框.ajax封装等) 多个业务文件,包含每个具体页面有关系的业务 ...

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