在理想情況下，開發者只需要實現核心的業務邏輯，其他都可以載入別人已經寫好的模組。但是，在ES6以前，JavaScript一直沒有自己模組體系（module），無法將一個大程式拆分成互相依賴的小檔案，再用簡單的方法拼裝起來。如果要想在前端做模組化開發，必須依賴第三方框架來實現，如：requireJS與seaJS。

javascript中的匯出和匯入實現模組化管理

requireJS是AMD規範的起源，seaJS是CMD規範的起源，由於兩者功能高度重合，後來seaJS不再維護，從此淡出人們的視野，於是requireJS一家獨大，直到ES6的出現，且迅速成為前端和伺服器端通用的模組解決方案，完全可以取代AMD 規範和NodeJS支援的CommonJS 規範。

ES6中首次引入模組化開發規範ES Module，讓JavaScript首次支援原生模組化開發，使用 export 和 import 關鍵字進行模組化開發。

1 export:用於對外輸出本模組

方法1 宣告時直接匯出

export var str = '1';

export function func1() {
 return 'hello word'
} 

export const func2 = () => {
 // 箭頭函式匯出
 return 'hello word'
}

方法2 統一在最後匯出

var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str,func1,func2,}

方法3 起別名

var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str as str1,func1 as f1,func2 as f2,}

方法4 對匯入的方法直接匯出

這種方法常用於統一檔案匯出

// 這是一個utils.js 匯出一個變數兩個方法
var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str as str1,}
// 這是引用utils.js的檔案-config.js
export {str,func2} from ‘./config.js'

方法5 預設匯出（default）

這種匯出方式一個js檔案只能有一個default，所以它後面不能跟變數宣告語句。

export default function() {}

方法6 匯出類

// 這是一個utils.js 匯出一個變數兩個方法
export class utils {

 format(){
  // 類方法1
 };
 cheackData(){
  // 類方法2
 }
}
// 呼叫utils檔案中
import {utils} from ‘./utils.js'

const utils = new utils();
utils.format();
utils.cheackData();

2 import:用於在模組中載入含有export介面的模組

方法1 直接匯出

import {str,func2} from ‘./utils.js'

方法2 起別名

這種情況一般用於匯入的兩個或者多個模組中存在相同的匯入內容

import {str as str1,func2 as f2} from ‘./utils.js'

方法3 一次匯入檔案中所有

import * as utils from ‘./utils.js'

utils.str
utils.func1
utils.func2

方法4 匯入使用default方式匯出的模組

import utils from ‘./utils.js'

到此這篇關於javascript中匯出與匯入實現模組化管理教程的文章就介紹到這了,更多相關javascript匯出與匯入模組化管理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！