2. 模块化

2.1. 为什么需要模块化

起初js只是完成一些简单的脚本处理，随着ajax的出现，慢慢形成了前后端分离的阶段。 前段完成工作越来越多，代码被组织在多个js文件中，维护和管理是个严重的问题。

需要解决2个问题

  • 复用性

  • 可维护性

2.2. 使用模块作为出口的规范

CommonJS

commonJS服务器端（nodeJS）的js模块规范,同步加载方式。

ADM

AMD是requireJS倡导的一种模块化规范，推崇依赖前置；在requireJS中模块是通过define来进行定义的，如果模块之间相互依赖，需要先将依赖模块导入进来，待导入完毕之后，在通过回调函数的方式执行后面的代码，有效的解决了模块依赖的问题。

ES6Moudle

使用import/export语法，在文件顶部导入需要的模块，特点是：静态化

2.3. 导出样例

2.3.1. CommonJS导出

1
2
3
4
5
6
7
// 导出
module.exports = {
    flag: flag,
    max: function (a,b){
        return a>b ? a:b
    }
}

2.3.2. CommonJS导入

1
2
var max =  require("./01-模块化开发导出")
max(1,2)

2.3.3. ES6导出

1
2
3
4
5
6
7
8
9
let name='xiaoming'
let sum = function (a,b){
    return a+b
}


export {
    name,sum
}

Tip

text 某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名， 使用export default <object>

2.3.4. ES6导入

1
2
3
4
5
import {name,sum}  from "./xiaohong"


let c = sum(1,2)
console.log(c )