Javascript(es2016) import和require用法和區(qū)別詳解
本文介紹了Javascript(es2016) import和require用法和區(qū)別詳解,分享給大家,具體如下:
寫個(gè)簡(jiǎn)單js文件,假設(shè)名字為:lib.js 。 假設(shè)內(nèi)容如下:
export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); }
這樣就可以在其他地方對(duì)lib中定義的屬性和方法進(jìn)行引用,引用方法有兩種,也就時(shí)import和require。
//方法一 import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); //方法兒 import * as lib from 'lib'; square = lib.square;
還可以設(shè)置默認(rèn)的導(dǎo)出信息,就需要崽lib.js中定義 export default {}。default后面可以接一個(gè)參數(shù),也可以接一個(gè)數(shù)組。書寫方法為:
//------ module1.js ------ export default 123; //------ module2.js ------ const D = 123; export { D as default };
通常比較習(xí)慣用第一種。然后用import就可以得到這個(gè)數(shù)組或則參數(shù)。但是import只能用于靜態(tài)導(dǎo)入,就是必須在文件開始的時(shí)候,在最上層就寫好。而require就可以實(shí)現(xiàn)動(dòng)態(tài)加載。
加載方式 | 規(guī)范 | 命令 | 特點(diǎn) |
---|---|---|---|
運(yùn)行時(shí)加載 | CommonJS/AMD | require | 社區(qū)方案,提供了服務(wù)器/瀏覽器的模塊加載方案。非語言層面的標(biāo)準(zhǔn)。只能在運(yùn)行時(shí)確定模塊的依賴關(guān)系及輸入/輸出的變量,無法進(jìn)行靜態(tài)優(yōu)化。 |
編譯時(shí)加載 | ESMAScript6+ | import | 語言規(guī)格層面支持模塊功能。支持編譯時(shí)靜態(tài)分析,便于JS引入宏和類型檢驗(yàn)。動(dòng)態(tài)綁定。 |
const incrementCounter = function ({dispatch,state}){ dispatch(‘INCREMENT‘) } export default { incrementCounter } //require let myAction = require(‘xxxxx‘); myAction.default.incrementCounter()
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js CSS3實(shí)現(xiàn)卡牌旋轉(zhuǎn)切換效果
這篇文章主要為大家詳細(xì)介紹了js CSS3實(shí)現(xiàn)卡牌旋轉(zhuǎn)切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JavaScript手寫實(shí)現(xiàn)一個(gè)簡(jiǎn)單的快捷鍵庫
前端開發(fā)中,有時(shí)項(xiàng)目會(huì)遇到一些快捷鍵需求,比如綁定快捷鍵,展示快捷鍵,編輯快捷鍵等需求,所以本文就來用JavaScript手寫一個(gè)簡(jiǎn)單的快捷鍵庫吧2024-02-02el-table el-table-column表頭嵌套循環(huán)數(shù)據(jù)的示例代碼
本文介紹了使用兩個(gè)數(shù)組來實(shí)現(xiàn)el-table中表頭的嵌套循環(huán),一個(gè)數(shù)組用于循環(huán)表格數(shù)據(jù),另一個(gè)用于循環(huán)表頭,幫助讀者更好地理解和應(yīng)用表頭嵌套功能,感興趣的朋友跟隨小編一起看看吧2024-09-09js左側(cè)多級(jí)菜單動(dòng)態(tài)的解決方案
實(shí)現(xiàn)的效果很簡(jiǎn)單,就是點(diǎn)一下顯示,再點(diǎn)一下就隱藏,只不過是多了幾級(jí)的問題。好,現(xiàn)在來說說我的設(shè)計(jì)思路,首先從第一級(jí)別開始,添加如下代碼2010-02-02uniapp實(shí)現(xiàn)下拉刷新的幾種方式小結(jié)
原生的uniapp的下拉刷新是一個(gè)普通的加載框,樣式真的很單一,下面這篇文章主要總結(jié)介紹了uniapp實(shí)現(xiàn)下拉刷新的幾種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02JS實(shí)現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實(shí)例【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)顯示帶倒影的圖片橫排居中放大展示功能,可實(shí)現(xiàn)點(diǎn)擊圖片及點(diǎn)擊左右按鈕滑動(dòng)切換的效果,涉及javascript針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08javascript使用中為什么10..toString()正常而10.toString()出錯(cuò)呢
在JavaScript中為什么10..toString()正常,而10.toString()出錯(cuò)呢?這個(gè)問題一直困擾著我,所抽時(shí)間搜集整理下,曬出來與大家分享感興趣的朋友可以了解下,希望對(duì)你們有幫助2013-01-01JS實(shí)現(xiàn)圖片輪播效果實(shí)例詳解【可自動(dòng)和手動(dòng)】
這篇文章主要介紹了JS實(shí)現(xiàn)圖片輪播效果,結(jié)合完整實(shí)例形式分析了javascript可自動(dòng)和手動(dòng)輪播圖的原理、布局與輪播功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-04-04