当有一个团队要合作开发一个前端界面时， 不可避免的，每个人都会创建自己的js文件用于书写各自负责的部分代码，最终这些js代码会在一个页面被引用，那么，在这期间，每个人写的代码都会有各自的变量名，但是，某几个人的变量名可能会写的一样，这个时候，可能会引起作用域污染，导致代码不能正常执行。

综合上面的案例，简而言之就是：前端代码复杂度变高，都写在一个文件里不太好，耦合性太高，难维护，全局变量被污染的可能性大。

那怎么解决这个问题呢

  1. 匿名函数的解决方案
  2. 使用模块作为出口

先来说说第一个解决方法

先放出一段代码

1
2
3
4
(function() {
    var flag = true
    //...
    })()

这个方法有一个很明显的弊端，那就是另外一个文件中不容易使用flag，因为flag是一个函数内变量，所以，在ES6出现后，就出现了第二种解决方法-模块化

优点：

  1. 降低复杂度

  2. 降低耦合性

  3. 部署方便

我们使用export用来导出模块，用import来引入模块

下面介绍几种导出用法

  1. export {a,b,c}

    1
    2
    3
    4
    5
    6
    7
    8
    const a = 123

    function b() {
      console.log('大家好')
    }

    //方法一, 导出变量、函数
    export {a,b,c}

  2. 直接导出

    1
    export var z = 16

  3. 直接导出类

    1
    2
    3
    4
    5
    6
    7
    export class Person {
        name= '小米'
        age = 16
        c() {
          console.log('大家好，我叫' + name + ',' + '我今年' + age + '岁了')
        }
    }

  4. 默认导出模块

    1
    2
    3
    export default function () {
      console.log('我是默认模块')
    }

导入的两种语用法

  1. 通用语法

    1
    import {a,b,c...} from "./01-导出模块.js"

  2. 在imports接收所有导出的模块

    1
    2
    import * as all from "./01-导出模块.js"
    console.log(all)