对于JS模块的简单了解

require、import、export

CommonJS规范

require()和module.exports

使用立即执行函数的写法，外部代码无法读取内部的_count变量

let module = (function() {
    let _count = 0
    let m1 = function() {
      console.log(_count)
    }
    
    let m2 = function() {
      console.log(_count + 1)
    }
    
    return {
        m1: m1,
        m2: m2
    }
})

ES6规范

• 使用export导出，用于规定模块的对外接口

一个模块是一个独立文件，文件内的所有变量或函数或类外部无法获取，如果希望获取到，必须使用export关键字

（1） 输出变量或者函数、类

输出变量

// profile.js
export let firstName = 'Mc'
export let lastName = 'IU'
export const year = 2017 

另一种写法，优先考虑下面这种写法

let firstName = 'Mc'
let lastName = 'IU'
const year = 2017

export {firstName, lastName, year}

输出一个函数

function v1() { }
function v2() { }
export {
    v1 as namedV1, // as关键字重命名
    v2
}

（2） export语句输出的接口，与其对应的值是动态绑定关系，可以取到模块内部实时的值

export let foo = 'baz'
setTimeout(() => foo = 'baz', 500)
// 输出foo值为bar，500毫秒之后变为baz

（3） export default命令，默认输出

// default.js

// 匿名函数
export default function() {
  console.log('foo')
}

// 非匿名函数
export default function foo() {
  console.log('foo')
}

// 另一种写法
function foo() {
  console.log('foo')
}

export default foo

default后不能跟变量声明语句

// 错误
// export default let a = 1
let a = 1
export default a

输出类

export default class {}

import Name from 'Myclass'
let o = new Name()

（4） 需要注意的正确的写法

// 错误写法
// ①export 1
// ②let m = 1; export m

// 变量的export正确写法
export let m = 1

let m = 1
export {m}

let n = 1
export {n as m}

// 函数或类export正确写法
export function f() {}

function f() {}
export {f}

• 使用import导入，用于获取其他模块提供的功能

使用export命令定义了模块的对外接口后，其他JS文件就可以通过import来加载这个模块

（1） 引入变量

// main.js
import {firstName, lastName, year} from './profile'

function setName(element) {
  element.textContent = firstName + ' ' + lastName
}
// 同样可重命名
import {lastName as listame} from './profile'

（2） import具有提升效果

foo()
import {foo} from 'my_module' // 不会报错，可正常调用foo函数

（3） 整体加载

// circle.js
function area(radius) {
  return Math.PI * radius * radius
}
function circumference(radius) {
  return 2 * Math.PI * radius
}

// main.js
import {area, circumference} from './circle' // 逐个加载

area(4)
circumference(14)

import * as circle from './circle' // 整体加载

circle.area(4)
circle.circumference(14)

（4） 引入默认导出

// 默认导出
export default function crc32() {}

import anyName from 'crc32'

// 非默认导出（注意大括号）
export function crc32() {}

import {crc32} from 'crc32'

• 模块的继承

假设有一个circleplus模块，继承了circle模块：

// circleplus.js
export * from 'circle' // 继承了circle的所有属性和方法
export let e = 2.718

export default function(x) {
  return Math.exp(x)
}

上面代码中的export ，表示再输出circle模块的所有属性和方法。注意export 命令会忽略circle模块的default方法。
然后，上面代码又输出了自定义的e变量和默认方法。

这时，也可以将circle的属性或方法，改名后再输出：

// circleplus.js
export {area as circleArea} from 'cricle'

上面代码表示，只输出circle模块的area方法，且将其改名为circleArea。

加载方法如下

// math.js
import * as math from 'circleplus'

import exp from 'circleplus'

console.log(exp(math.e))