Import,Require以及Export

都是爲了js模塊化編程

遵循規範

• require 是AMD規範引入方式
• import 是es6的一個語法標準，須要轉換成es5的語法才能兼容瀏覽器

調用時間

• require是運行時調用，因此require理論上能夠運用在代碼的任何地方
• import 是編譯時調用，因此必須放在文件頭部

本質

• require 是賦值過程，其實require的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量
• import 是解構過程，可是目前全部的引擎都還沒用實現import，因此須要babel進行轉碼，把import轉碼爲require

require/exports寫法

• node中導入模塊

var a = require('a')
const fs = require('fs')
複製代碼

• node中向外暴露成員的形式

exports.fs = fs
module.exports = fs
複製代碼

import/export寫法

導入

• ES6中 導入模塊

<!--import 模塊名稱 from '模塊標識符' -->

import utils from 'utils'
import {default as newName} from 'utils'
import * as newName from 'utils'
import {isPhone} from 'utils'
import {isPhone as isPhone2} from 'utils'
import utils, {isPhone} from 'utils'
複製代碼

導出

• ES6中，使用export default 和 export 向外暴露成員

export default utils
export const utils
export function utils
export { isPhone, isObject }
export default a
export a
複製代碼

Export番外

export default和export const

export default 是默認導出
export const 是命名導出

Default Export (export default)

每一個文件均可以有一個默認導出 export default，導入此類文件時須要指定一個任何你喜歡的名稱。例如：

import Func1 from './Func1'
複製代碼

Named Export (export)

每一個文件能夠有多個命名導出 export const，而後將你要導入的名稱用花括號包住。例如：

// 導入多個導出
import { MyClass, MyOtherClass } from "./MyClass1"
// 使用 as 重命名導出
import { MyClass2 as MyClass2Alias } from "./MyClass2"
// 導入全部
import * as MyClasses from "./MyClass1"
複製代碼

注意

默認導出實際上就是一個名字爲 default 的命名導出，因此也能夠像這樣導入：

import { default as MyDefaultExport } from "./MyFileWithADefaultExport";
複製代碼

tips

1. export default 向外暴露的成員，能夠使用任意變量來接收

2. 在一個模塊中，export default 只容許向外暴露一次

3. 在一個模塊中，能夠同時使用export default 和export 向外暴露成員

4. 使用export向外暴露的成員，只能使用{  }的形式來接收，這種形式，叫作【按需導出】

5. export能夠向外暴露多個成員，同時，若是某些成員，在import導入時，不須要，能夠不在{ }中定義

6. 使用export導出的成員，必須嚴格按照導出時候的名稱，來使用{ }按需接收

7. 使用export導出的成員，若是想換個變量名稱接收，能夠使用as來起別名