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))