关于javascript:前端模块ES6与commonJS区别

模块化就是将变量和函数放入不同的文件中
模块的作用域是公有的外部定义的代码只能在以后文件中应用
内部应用那么须要将此模块裸露进来
模块化的意义缩小全局变量, 防止变量名和函数命名抵触
进步代码的复用性和维护性

commonJS 对模块依赖解决是“动静的”，ES6 Module 是动态的
commonjs 模块输入的是值的浅拷贝，ES6 模块输入的是值的援用 (cmmonjs 模块输入后被扭转，其援用模块不会扭转，而 ES6 模块会扭转)。

commonJS 这个“动静的”指的是模块依赖关系的建设产生在代码运行阶段。

ES6 这个“动态的”指的是模块依赖关系建设产生在代码编译阶段。

webpack 的 tree-shaking 只能作用于 ES6 模块，就是因为 ES6 模块在编译时就能确定依赖

CommonJS 标准，每个模块外部有两个变量能够应用 require 和 module

require 用来加载某个模块

module 代表以后模块，是一个对象，保留了以后模块的信息。exports 是 module 上的一个属性，保留了以后模块要导出的接口或者变量，应用 require 加载的某个模块获取到的值就是那个模块应用 exports 导出的值

module.exports对象会作为 require 函数的返回值被加载。require的模块门路能够动静指定，反对传入一个表达式，也能够通过 if 语句判断是否加载某个模块。因而在 CommonJS 模块被执行前，并不能明确依赖关系，模块的导入导出产生在代码运行时。

Node.js 中的 CommonJS 标准，每个模块都有一个 exports 公有变量，exports 指向 module.exports
exports 是模块内的公有局部变量，它只是指向了 module.exports，所以间接对 exports 赋值是有效的，这样只是让 exports 不再指向 module.exports 了而已

// 能够这么了解 每个模块开始的中央都默认增加了上面的代码
var exports = modules.exports

// test.js
const name = 'yang';
let age = 29;

exports.name = name;
exports.getAge = function () {return age;};

require 命令的基本功能是，读入并执行一个 js 文件，而后返回该模块的 exports 对象。如果没有发现指定模块，会报错。
第一次加载模块的时候，Node 会缓存该模块，前面再次加载该模块，就间接冲缓存中读取 module.exports 属性。
CommonJS 模块的加载机制是，require 的是被导出的值的拷贝。也就是说，一旦导出一个值，模块外部的变动就影响不到这个值

// test.js
const name = 'yang';
let age = 29;
exports.name = name;
exports.age = age;
exports.setAge = function () {age++;}
 
// index.js
let p = require('./test.js');
 // yang
console.log(p.name);
 // 29
console.log(p.age);
p.name = 'yang++'
// yang++
console.log(p.name); 
// 外部 age++ 不影响导出的值
p.setAge(); 
console.log(p.age); // 29
// 导出的 age++ 会自增
p.age++; 
let b = require('./test.js');
 // yang++
console.log(b.name);
// 30
console.log(b.age);

向一个立刻执行函数提供 require，exports，module 三个参数，模块代码放在这个立刻执行函数外面。模块导出值放在 module.exports 中，这样即实现了模块化加载

(function(module, exports, require) {
    // b.js
    var a = require("a.js")
    console.log('a.name=', a.name)
    console.log('a.age=', a.getAge())
 
    var name = 'yang'
    var age = 29
    exports.name = name
    exports.getAge = function () {return age}
 
})(module, module.exports, require)

webpack 编译后的代码

// bundle.js
(function (modules) {// 模块治理的实现})({'a.js': function (module, exports, require) {// a.js 文件内容},
  'b.js': function (module, exports, require) {// b.js 文件内容},
  'index.js': function (module, exports, require) {// index.js 文件内容}
})

webpack 实现__webpack_require__，初始化一个 module 对象放入 installedModules 中，当这个模块再次被援用到时间接从 installedModules 外面取值，此时他就是一个空对象，解释了下面例子的景象。

function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }

ES6 Module 的导入导出都是申明式的，它不反对导入门路是一个表达式，所有导入导出必须位于模块的顶层作用域（不能放在 if 语句中）。因而 ES6 Module 是一个动态的模块构造，在 ES6 代码编译阶段就能够剖析出模块的依赖关系。

死代码检测和排除，通过动态剖析工具检测出哪些模块没被调用过。比方引入工具类库时，工程可能只用到了某一个接口，但可能将整个工具包都加载进来了，未被调用的代码永远不会被执行。通过动态剖析能够在打包时去掉这些未应用的模块，缩小打包资源体积。
模块变量类型查看，js 属于动静类型语言，不会再代码执行前查看类型谬误。例如将字符串类型进行函数调用。ES6 Module 的动态模块构造能够确保模块之间传递的值或接口类型正确。
编译器优化，CommonJS 实质上是导入一个对象，ES6 Module 反对导入变量，缩小了援用层级，程序效率更高。

导入模块时，CommonJS 是导出值的拷贝，ES6 Module 是值的动静映射，并且这个映射是只读的。

commonJS 在文件中批改导入的值不会使被导入的文件上的值产生扭转。因为它是一个拷贝的值。
ES6 Module 中导入的变量时对原有值的动静映射，不能对 ES6 Module 导入的变量进行更改，因为这个映射是只读的。

循环依赖指模块 A 依赖于模块 B，同时模块 B 依赖于模块 A（工程中应该尽量避免循环依赖，复杂度会晋升，依赖关系不清晰）

以上局部内容起源与本人温习时的网络查找，也次要用于集体学习，相当于记事本的存在，暂不列举链接文章。如果有作者看到，能够分割我将原文链接贴出。

关于javascript:前端模块ES6与commonJS区别

一、概览

区别

二、commonJS

CommonJS 的 exports

CommonJS 的 require

实现一个 commonJS

三、ES6 Module

ES6 的改良

值拷贝与动静映射

循环依赖

阐明