前端模块化（commonjs和es6）

前言：

• 前端模块化是前端工程化的基石，模块就是一个个的功能块，相互独立、低耦合的、高内聚的特点。

CommonJS 模块的特点如下:

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序。
• 在 Node.js 模块系统中，每个文件都视为独立的模块。

ES6 模块

• 功能主要由两个命令构成：export 和 import，export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。
• export

// 可以使用 as 关键字对输出的变量、函数、类重命名
let name = 'bus'
let color = 'green'
let weight = '20吨吨吨'
function run() { console.log('Bus is running') }
export {
  name as busName,
  color as busColor,
  weight as busWeight,
  run as busRun
}

• import

import { name, color, weight, run } from './car'
 
// 导入一个模块的时候也可以用 as 关键字对模块进行重命名
import {name as busName } from './car'
 
// 通过星号 '*' 整体加载某个文件
import * as car from './car'
console.log(car.name)   // bus
console.log(car.color)  // green

• export defualt
• 使用 import 命令加载模块时需要知道变量名或者函数名,export default 命令为模块指定默认输出

// 定义模块 math.js
let basicNum = 0
let add = function(a, b) {
  return a+b
}
export default { basicNum, add }
 
// 引入
import math from './math'
function test() {
  console.log(math.add(99 + math.basicNum))
}