常见的模块化方法common JS和ES module模块化是前端学习中一很重要的知识点，今天就跟大家一起来总结以下模块

模块化是前端学习中一很重要的知识点，今天就跟大家一起来总结以下模块化两个常见的方法，像是AMD和CMD都用的比较少了，就不说了。

COMMON JS的使用

common js的导出

1.在开发中使用的很少

exports.name = name
exports.age = age
exports.sayHello = sayHello

2.将模块中内容导出

module.exports.name = name
module.exports.age = age
module.exports.sayHello = sayHello

exports===module.exports,因为这两个指向同一个内存地址，是完全相等的，module.exports.name===exports.name，但是像第三种写法，相当于重新给module.exports分配了一个内存地址。

3.开发中常见的写法

module.exports = {
  name,
  age,
  sayHello
}

此时，在上述代码中,exports!=module.exports

common js的导入

直接require("需要导入的文件")

const foo = require("./foo.js")

foo.name===exports.name，二者属于引用赋值，指向的是同一个地址，一般一个改变，另一个也会改变，但是一般不建议在导入时修改变量的值，只在导出中进行修改。

common js中模块的加载过程

1.结论一: 当一个模块被引入(导入), 模块中的代码会被执行一次

因为每个模块对象都有一个属性loaded，默认为false,会自动执行一次，变为true,true表示已经加载。

console.log("--------")

const foo = require("./foo")

console.log("++++++++")

2.结论二: 当一个模块被多次引入时, 模块中的代码只会执行一次

const foo2 = require("./foo")
const foo3 = require("./foo")
const foo4 = require("./foo")
const foo5 = require("./foo")
const foo6 = require("./foo")

无论被引入多少次，代码只会执行一次，因为模块引入后，loaded已经变为true了。

3.结论三: 如果有循环引入, 那么执行顺序: 深度优先算法(图结构)

即如果模块中，执行到一行需要引入其它模块的代码，那么会顺着这个代码所指向的模块一直去找，直到找到那个没有引入的模块，再继续执行下面的代码，如果遇到重复引入的代码，该代码也只会引入一次，不再继续引入。

common js的弊端

common js的加载模块是同步的在浏览器中运行不是那么有优势，但是使用webpack，还是可以使用commonjs的，因为webpack可以将代码转化成浏览器可以执行的代码。

ES module的使用

es module使用import导入和export导出关键字，进行模块的导入与导出，使用es module的代码是可以实现异步的。

ES module的导出

导出方式一：

export {
    name,
    age,
    sport
 }

导出方式二：导出时起一个别名

一般导出不起别名，只在导入时起别名

export{
    name as myname,
    age as myage,
    sport as mysport
}

导出方式三：直接在前面加export标识符

export const name="caesar"
export const age = 24
export sport ="run"

ES module的导入

导入方式一：直接导入

import {
       name,
       age,
       sport}
 from "./foo.js"

导入方式二：起别名

import{  name as myname,
    age as myage,
    sport as mysport
} from "./foo.js"

导入方式三使用通配符整个导入

import * as foo from "./foo.js"

同时，可以将export和import同时使用，将所有的子文件都导出到一个文件中，统一导出，那么导入时，只需要在一个文件中导入即可。导入模块中不能更新变量，只在导出时更新。

常见的模块化方法common JS和ES module