您好,登錄后才能下訂單哦!
怎么在javascript中利用 export對外輸出?相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
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, 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中利用 export對外輸出的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。