模块化

1. 什么是模块？

• 将一个复杂的程序依据定的规则拆分成单个文件，并最终组合在一起
• 这些拆分的文件就是模块，模块内部数据是私有的，只是向外部暴露一些方法与外部其它模块通信

2. 为什么要模块化？

• 降低复杂度, 提高解耦性
• 避免命名冲突
• 更好的分离，按需加载
• 更高复用性，高可维护性

第三方模块：

const uniq = require('uniq')

自定义模块：

src>module.js

// 分别暴露
export const teacher1 = {name: 'A' ,age:15}
export const teacher2 = {name: 'B' ,age:17}

// 统一暴露
const stu1 = {name: 'C' ,age:18}
const stu2 = {name: 'D' ,age:19}
export {stu1, stu2}

// 默认暴露（只能暴露一个表达式）
export default {
    school: '胶东大学',
    address: '山东',
    hobby: ['java','js','python']
}

src>app.js

import {teacher1, teacher2, stu1, stu2} from './module'
import module from './module' // 只有默认暴露不加{}
console.log(module);
console.log(teacher1);
console.log(teacher2);
console.log(stu1);
console.log(stu2);

或

// 引入多种暴露方式的模块
import module, {teacher1, teacher2, stu1, stu2} from './module'
console.log(module);
console.log(teacher1);
console.log(teacher2);
console.log(stu1);
console.log(stu2);

其他方法

// 引入分别暴露模块+重命名
import {data as data1} from './module'
// 引入分别暴露模块（打包引入）
import * as module from './module'

处理浏览器语法兼容性问题

原始方法（分两步）：

balel ./src -d ./build // ES6 → ES5 模块化语法 → CJS（common js）
browserify ./build/app.js -o ./build/build.js // CJS → ES5

WebPack自动化模块打包器（构建工具）：

移步下一篇文章：16.Webpack构建工具（模块打包器）