快捷導(dǎo)航

javascript中導(dǎo)出與導(dǎo)入實(shí)現(xiàn)模塊化管理教程

更新時(shí)間：2020年12月03日 12:18:14 作者：標(biāo)梵互動(dòng)

這篇文章主要給大家介紹了關(guān)于javascript中導(dǎo)出與導(dǎo)入實(shí)現(xiàn)模塊化管理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在理想情況下，開發(fā)者只需要實(shí)現(xiàn)核心的業(yè)務(wù)邏輯，其他都可以加載別人已經(jīng)寫好的模塊。但是，在ES6以前，JavaScript一直沒有自己模塊體系（module），無法將一個(gè)大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。如果要想在前端做模塊化開發(fā)，必須依賴第三方框架來實(shí)現(xiàn)，如：requireJS與seaJS。

javascript中的導(dǎo)出和導(dǎo)入實(shí)現(xiàn)模塊化管理

requireJS是AMD規(guī)范的起源，seaJS是CMD規(guī)范的起源，由于兩者功能高度重合，后來seaJS不再維護(hù)，從此淡出人們的視野，于是requireJS一家獨(dú)大，直到ES6的出現(xiàn)，且迅速成為前端和服務(wù)器端通用的模塊解決方案，完全可以取代AMD 規(guī)范和NodeJS支持的CommonJS 規(guī)范。

ES6中首次引入模塊化開發(fā)規(guī)范ES Module，讓JavaScript首次支持原生模塊化開發(fā)，使用 export 和 import 關(guān)鍵字進(jìn)行模塊化開發(fā)。

1 export:用于對外輸出本模塊

方法1 聲明時(shí)直接導(dǎo)出

export var str = '1';

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

export const func2 = () => {
 // 箭頭函數(shù)導(dǎo)出
 return 'hello word'
}

方法2 統(tǒng)一在最后導(dǎo)出

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 對導(dǎo)入的方法直接導(dǎo)出

這種方法常用于統(tǒng)一文件導(dǎo)出

// 這是一個(gè)utils.js 導(dǎo)出一個(gè)變量兩個(gè)方法
var str = '1';

function func1() {
 return 'hello word'
}

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

export {
 str as str1,
 func1 as f1,
 func2 as f2,
}
// 這是引用utils.js的文件-config.js
export {str,func1,func2} from ‘./config.js'

方法5 默認(rèn)導(dǎo)出（default）

這種導(dǎo)出方式一個(gè)js文件只能有一個(gè)default，所以它后面不能跟變量聲明語句。

export default function() {}

方法6 導(dǎo)出類

// 這是一個(gè)utils.js 導(dǎo)出一個(gè)變量兩個(gè)方法
export class utils {

 format(){
  // 類方法1
 };
 cheackData(){
  // 類方法2
 }
}
// 調(diào)用utils文件中
import {utils} from ‘./utils.js'

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

2 import:用于在模塊中加載含有export接口的模塊

方法1 直接導(dǎo)出

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

方法2 起別名

這種情況一般用于導(dǎo)入的兩個(gè)或者多個(gè)模塊中存在相同的導(dǎo)入內(nèi)容

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

方法3 一次導(dǎo)入文件中所有

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

utils.str
utils.func1
utils.func2

方法4 導(dǎo)入使用default方式導(dǎo)出的模塊

import utils from ‘./utils.js'

到此這篇關(guān)于javascript中導(dǎo)出與導(dǎo)入實(shí)現(xiàn)模塊化管理教程的文章就介紹到這了,更多相關(guān)javascript導(dǎo)出與導(dǎo)入模塊化管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: