javascript中導出與導入實現(xiàn)模塊化管理教程
在理想情況下，開發(fā)者只需要實現(xiàn)核心的業(yè)務邏輯，其他都可以加載別人已經寫好的模塊。但是，在ES6以前，JavaScript一直沒有自己模塊體系（module），無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。如果要想在前端做模塊化開發(fā)，必須依賴第三方框架來實現(xiàn)，如：requireJS與seaJS。
javascript中的導出和導入實現(xiàn)模塊化管理
requireJS是AMD規(guī)范的起源，seaJS是CMD規(guī)范的起源，由于兩者功能高度重合，后來seaJS不再維護，從此淡出人們的視野，于是requireJS一家獨大，直到ES6的出現(xiàn)，且迅速成為前端和服務器端通用的模塊解決方案，完全可以取代AMD 規(guī)范和NodeJS支持的CommonJS 規(guī)范。
ES6中首次引入模塊化開發(fā)規(guī)范ES Module，讓JavaScript首次支持原生模塊化開發(fā)，使用 export 和 import 關鍵字進行模塊化開發(fā)。
1 export:用于對外輸出本模塊
方法1 聲明時直接導出
export var str = '1';
export function func1() {
return 'hello word'
}
export const func2 = () => {
// 箭頭函數(shù)導出
return 'hello word'
}
方法2 統(tǒng)一在最后導出
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 對導入的方法直接導出
這種方法常用于統(tǒng)一文件導出
// 這是一個utils.js 導出一個變量兩個方法
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 默認導出（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,func1,func2} from ‘./utils.js'
方法2 起別名
這種情況一般用于導入的兩個或者多個模塊中存在相同的導入內容
import {str as str1,func1 as f1,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中導出與導入實現(xiàn)模塊化管理教程的文章就介紹到這了,更多相關javascript導出與導入模塊化管理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在使用Element UI的el-table組件時,可能會遇到過濾數(shù)據后選中狀態(tài)丟失的問題,解決這一問題的關鍵在于利用Vue的計算屬性和事件綁定功能,感興趣的朋友跟隨小編一起看看吧2024-09-09
兼容IE/Firefox/Opera/Safari的檢測頁面裝載完畢的腳本Ext.onReady的實現(xiàn)
其中對于IE的檢測很有意思。 以上代碼，整理自Extjs的腳本，完全可以代替 Ext.onReady使用。2009-07-07
下面小編就為大家?guī)硪黄僯s的右下角彈窗實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家介紹了web如何改變主題配色方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了JS實現(xiàn)的文字與圖片定時切換效果代碼,可實現(xiàn)定時切換及鼠標點擊切換兩種效果,涉及JavaScript鼠標事件控制頁面樣式的相關技巧,需要的朋友可以參考下2015-10-10
JS中如何刪除某個父元素下的所有子元素？這里我介紹幾種方法,結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
在網頁中，我們可以將JavaScript代碼放在html文件中任何位置，但一般放在head或body標簽里面。一般來說，<script>元素放在哪里與其的功能作用是緊密相關的，通過本文我們一起學習下2016-01-01
javascript使用Blob對象實現(xiàn)的下載文件操作示例
這篇文章主要介紹了javascript使用Blob對象實現(xiàn)的下載文件操作,結合實例形式分析了javascript使用Blob對象下載文件相關原理、操作技巧與注意事項,需要的朋友可以參考下2020-04-04
在JavaScript中,我們經常需要對數(shù)據的類型進行判斷,以便進行相應的處理,本文將介紹JavaScript中常見的類型判斷方法,包括typeof、instanceof、Object.prototype.toString() 以及Array.isArray(),并且會詳細解釋它們之間的區(qū)別,需要的朋友可以參考下2023-11-11