模块化规范

一、优点

1.防止命名重复
2.更好分离，按需加载
3.更好复用
4.高可维护性

缺点

1.请求过多
2.依赖模糊
3.难以维护

常用的模块化规范

1.CommonJS
2.AMD
3.CMD
4.ES6

CommonJS

node基于CommonJS编写的
一、规范
1.每个文件都可以当做一个模块
2.在服务器端：模块的加载是运行时同步加载的
3.在浏览器端：模块需要提前编译打包处理
二、基本语法
1.暴露模块
module.exports = value
exports.xxx = value
2.引入模块
require(xxx) 第三方模块：xxx为模块名 自定义模块：xxx为模块文件路径
三、实现

分别暴露

// 分别暴露模块
export function foo() {
    console.log('foo()');
}

export function bar() {
    console.log('bar()');
}

export let arr = [1, 2, 3, 4, 5]

统一暴露

// 统一暴露
function fun() {
    console.log('fun()');
}

function fun2() {
    console.log('fun2()');
}

export { fun, fun2 }

默认暴露

// 默认暴露
export default {
    msg: 'hello......',
    fun: () => {
        console.log('aaaaaaaaaaaaa');
    }
}

引入模块

// 引入其他的模块
// 如果是单个的js文件 引入时要加上后缀
// 引入的是一个npm下载的包，就不需要加后缀
import {foo, bar} from './module1.js'
import {fun, fun2} from './module2.js'
import module3 from './module3.js'
import $ from 'jquery'
import express from 'express'

foo();
bar();
fun();
fun2();
console.log(module3.msg);;
console.log(module3.fun());

AMD

专门基于浏览器端，模块的加载是异步的

ES6

一、说明
依赖的模块需要打包处理
二、语法
导出模块 export
引入模块 import