前端模块化规范小结（commonJS 、ES6模块化）

1. 前端模块化规范主要有：

• commonJS 规范
• AMD规范
• CMD 规范
• ES6 规范

实际上，前三种模块化规范现在已经不流行了，ES6模块化规范就相当于可以取代前三者了。

本文主要讲讲 commonJS 规范和  ES6模块化规范。

2. commonJS 规范

概述：

commonJS 规范起初被提出用在服务器端的，并命名为 serverJS，后来为了体现它的广泛应用性，改为 commonJS。

commonJS  规范的模块中，所有变量和函数都是私有的。

commonJS 规范规定，每个模块中有一个 module 变量，代表了当前模块。

module 是一个对象，它有个 exports 属性（即 module.exports ）代表改模块向外提供的接口。

加载某个模块，其实是加载该模块的module.exports属性。

外部模块需要加载某一模块的时候用 require 来加载。

在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。

所有代码都运行在模块作用域，不会污染全局作用域。

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

模块加载的顺序，按照其在代码中出现的顺序。

node.js 正是遵循 commonJS 模块化规范的。在 node 中，一个JS文件就为一个模块。

另外，exports 和 module.exports 是全等的，因为 node.js 内部代码中规定  module.exports = exports 。但是，两者同时存在时，以 module.exports 导出对象为准。

下面上代码演示：

// mod1.js
const name = "哈哈哈";
const age = 18;
 
let message = "hello javascript";
function sayHello() {
    console.log('干嘛')
}
 
exports.name = name;
exports.age = age;
exports.sayHello = sayHello;
 
module.exports = {
    name: "嘻嘻嘻",
    age: 20,
    sayHello:  function() {
        console.log('你好')
    }
}

// mod2.js
const m1 = require("./mod1.js");
 
console.log(m1.name); // 嘻嘻嘻
console.log(m1.age);  // 20
m1.sayHello();  // 你好
 
// 也可以直接将导出对象解构获取变量
// const { name, age, sayHello } = require("./bar");
 
// console.log(name);
// console.log(age);
// sayHello();

3. ES6 模块化

https://www.cnblogs.com/suihung/p/16153213.html

4.  commonJS 与 ES6 模块化 的区别

① CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

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

CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。