基本介绍

        前端模块化编程就是为了解决命名冲突，文件依赖的问题。我们使用模块化编程，可以仅仅引入需要用到的模块，也能解决命名冲突问题。

---

CommonJS模块化

        模块化肯定有导入和导出功能，下面分别进行介绍

module.exports导出

        每个 js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类/对象，
都是私有的，对其他 js 文件不可见。我们如果想要其他js进行引用，就需要将其进行导出。

        导出的语法为modele.expoets={}，导出的是一个对象，将需要导出的内容放入对象就行了。

let dog = {
    name:'jack',
    age:18
}
let describe = '这是一封离别信'

//导出dog对象，describe属性
module.exports = {
    dog,
    describe
}

---

require导入

        我们想要使用其他js里面的内容，那么肯定就需要进行导入，就像是java的导包一样，js中的导包语法为require(js文件)。

//导入export.js文件，取名为ok
let ok = require('./export')

//访问对象的内容
console.log(ok.dog);
console.log(ok.describe);

---

ES6模块化

        前面介绍的是传统的模块化编程，现在来介绍ES6模块化中的模块化编程，相对于传统的模块化编程，更加的灵活。下面进行介绍。

按需导入导出

        我们在进行导出的时候可以进行选择导出哪些文件，使用export{}进行导出，{}里面写要导出的内容。也可以在变量定义的时候直接进行导出，下面代码进行演示

导出方式

export const a = 1;
export const b = 2;

const dog = {
    name: '旺财',
    age: 1
};
export {
    dog
}

         上面代码就导出了三个变量，一个dog对象，还有a，b变量。

导入方式

        我们在es6中导入是按需进行导入，即就是用到上面导入什么。使用import {} from '路径'进行导入，{}里面对导出的内容进行接收，就是对象解构的方式，名字必须相同，下面的代码对上面导出的内容进行接收。

import {a,b,dog} from "./export_02"

console.log(a)
console.log(b)
console.log(dog.age)

---

默认导出

        这种方式比较灵活，使用的也最多，因为这种方式可以可以不需要导入和导出的名字一致。

默认导出方式

        使用export default {}来进行导出，要导出的内容写在{}就行，和其他的导出方式没什么区别，就是多了一个default

export default {
    sum(a, b) {
        return a + b;
    },
    sub(a, b) {
        return a - b;
    }
}
export const a = 1;

        上面的形式就是导出了一个匿名对象，一个a变量。

默认导入的方式

        使用默认导出方式的文件引入的时候就不是通过对象解构的方式来进行引入而是直接使用一个变量名来进行接收。

import m from "./export_03"
import {a} from "./export_03"

console.log(m.sum(1,2))
console.log(a)

        上面代码就使用一个m变量接收了导出的匿名对象。

---

注意事项

        ES6 的模块化无法在 Node.js 中执行，需要用 Babel 转码 ES5 后再执行，在导入的时候，没有导出的不能使用。