import 與require的區別

https://www.imooc.com/article/22371

在es6之前js一直沒有自己的模塊語法，爲了解決這種尷尬就有了require.js的出現。在es6發佈之後js又引入了import的概念使得不清楚兩者之間的區別的同學在實際使用過程中造成了自己的誤解，在查閱了相關資料之後在此記錄下自己的小小見解。

---

• require的基本語法

核心概念：在導出的文件中定義module.export,導出的對象的類型不予限定（可以是任何類型，字符串，變量，對象，方法），在引入的文件中調用require()方法引入對象即可。

//a.js中
module.export = {
    a: function(){
     console.log(666)
  }
}

//b.js中
var obj = require('../a.js')
obj.a()  //666

【注】:本質上是將要導出的對象賦值給module這個的對象的export屬性，在其他文件中通過require這個方法訪問該屬性

• import的基本語法
  核心概念：導出的對象必須與模塊中的值一一對應，換一種說法就是導出的對象與整個模塊進行結構賦值。對的，你沒有聽錯。抓住重點，解構賦值！！！！！

//a.js中
export default{    //（最常使用的方法,加入default關鍵字代表在import時可以使用任意變量名並且不需要花括號{}）
     a: function(){
         console.log(666)
   }
}

export function(){  //導出函數

}

export {newA as a ,b,c}  //  解構賦值語法(as關鍵字在這裏表示將newA作爲a的數據接口暴露給外部，外部不能直接訪問a)

//b.js中
import  a  from  '...'  //import常用語法（需要export中帶有default關鍵字）可以任意指定import的名稱

import {...} from '...'  // 基本方式，導入的對象需要與export對象進行解構賦值。

import a as biubiubiu from '...'  //使用as關鍵字，這裏表示將a代表biubiubiu引入（當變量名稱有衝突時可以使用這種方式解決衝突）

import {a as biubiubiu,b,c}  //as關鍵字的其他使用方法

---

它們之間的區別

• require 是賦值過程並且是運行時才執行， import 是解構過程並且是編譯時執行。require可以理解爲一個全局方法，所以它甚至可以進行下面這樣的騷操作，是一個方法就意味着可以在任何地方執行。而import必須寫在文件的頂部。

var a = require(a() + '/ab.js')

• require的性能相對於import稍低，因爲require是在運行時才引入模塊並且還賦值給某個變量，而import只需要依據import中的接口在編譯時引入指定模塊所以性能稍高

• 在commom.js 中module.export 之後 導出的值就不能再變化，但是在es6的export中是可以的。

var a = 6
export default {a}
a = 7  //在es6中的export可以

var a = 6
module.export = a
a = 7   //在common.js中，這樣是錯誤的

https://www.zhihu.com/question/56820346

require/exports 和 import/export 形式不一樣

require/exports 的用法只有以下三種簡單的寫法：

const fs = require('fs')
exports.fs = fs
module.exports = fs

而 import/export 的寫法就多種多樣：

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'