js模块化

模块化是指将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。

最早我们开发将所有的代码写在一个js文件中，随着需求越来越复杂，代码量越来越大，如果仍然把所有代码写在一个js文件中，那么代码耦合度过高不方便后期维护，也不方便程序员找到某一个功能点的代码

模块化将一个复杂的js文件按共同或类似的逻辑拆分成多个js文件，拆封的文件内部数据是私有的，只是向外部暴露一些接口（方法）与其他模块通信，不仅方便找到某一块功能点的代码，也可以达到复用的效果。

ES6实现模块化

重点是引入js的地方，必须要有一个 type="module"

<script src="module/index.js" type="module"></script>

然后子模块可以使用 export 将成员抛出

父模块使用 import 将子模块的成员导入

导入的时候，把js文件的后缀写完

export 具体成员

export function add(x, y){
    return x+y
}

export const name = "枫枫"

export const obj = {
    name: "fengfeng"
}

使用

import {add, name, obj} from "./module/m1.js";

export default

export default {
    obj: {
        name: "张三"
    },
    add,
}

使用

import m1 from "./module/m1.js"

这两种export是可以共存的

立即执行函数实现模块化

除了可以用使用对象进行成员隔离

还可以使用立即执行函数创造一个封闭的代码空间

const m1 = (function (){
    function add(a, b){
        return a+b
    }
    return {
        add: add,
    }
}())

const m2 = (function (){
    function add(){
        return "this is m2 add"
    }
    return {
        add: add,
    }
}())


console.log(m1.add(1,2))
console.log(m2.add())