資訊專欄INFORMATION COLUMN
前言
本篇文章主要為大家敘述關(guān)于JavaScript中的export和import，這兩個(gè)常見(jiàn)的報(bào)錯(cuò)。
報(bào)錯(cuò)：Uncaught SyntaxError: Cannot use import statement outside a module
上面標(biāo)書(shū)的是無(wú)法在module以外使用import，在網(wǎng)上進(jìn)行查閱之后才了解到，這是由于script標(biāo)簽?zāi)J(rèn)是使用JavaScript語(yǔ)言，使用ES6的語(yǔ)法會(huì)發(fā)生解析錯(cuò)誤，需要在script標(biāo)簽中加入type=“module”，具體如下：
<script type="module"> import Rotation from '../js/ui.js' Rotation(); </script>
仔細(xì)看，這樣就不會(huì)出現(xiàn)報(bào)錯(cuò)吧。
報(bào)錯(cuò)：Uncaught SyntaxError: The requested module ‘…/js/ui.js’ does not provide an export named ‘default’
第一錯(cuò)誤解決了，但隨之而來(lái)的是控制臺(tái)又拋出了第二個(gè)錯(cuò)誤：
現(xiàn)在我來(lái)說(shuō)說(shuō)我的，目標(biāo)JS文件中沒(méi)有default導(dǎo)出，因此，我的JS文件就是這樣：
function Rotation() {
let lbt = document.querySelectorAll('.zh-lbt');
for (let i = 0; i < lbt.length; i++) {
let lbtNum = Number(lbt[i].getAttribute('num'))||1
console.log(lbtNum);
}
}
export {Rotation};常規(guī)來(lái)說(shuō)沒(méi)啥問(wèn)題，export default和export只是暴露目標(biāo)數(shù)有區(qū)別，因此不會(huì)是語(yǔ)法報(bào)錯(cuò)，是不是我的引入出現(xiàn)問(wèn)題，隨之做出下來(lái)改變
<script type="module"> import Rotation from '../js/ui.js' Rotation(); </script>
加了一個(gè)大括號(hào){}，修改為了
<script type="module">
import {Rotation} from '../js/ui.js'
Rotation();
</script>發(fā)現(xiàn)果然控制臺(tái)沒(méi)有報(bào)錯(cuò)，并出現(xiàn)了結(jié)果
這個(gè)問(wèn)題我認(rèn)為其原因是export語(yǔ)法可以向外暴露多個(gè)目標(biāo)，所以在引入時(shí)需要通過(guò)“{}”以對(duì)象經(jīng)行引入，export default只能向外暴露一個(gè)，所以可以不用寫(xiě){}。
可卻不是。
在改為export default后，才發(fā)現(xiàn)export default在引入時(shí)，不能加{}，否則會(huì)報(bào)錯(cuò)。
export default{
Rotation:function () {
let lbt = document.querySelectorAll('.zh-lbt');
for (let i = 0; i < lbt.length; i++) {
let lbtNum = Number(lbt[i].getAttribute('num'))||1
console.log(lbtNum);
}
}
} <script type="module">
import {Rotation} from '../js/ui.js'
Rotation.Rotation();
</script>此時(shí)控制臺(tái)會(huì)報(bào)錯(cuò)
同理此時(shí)只要去掉“{}”，就不會(huì)報(bào)錯(cuò)了，并能正確打印上面的結(jié)果。
歡迎大家關(guān)注更多精彩內(nèi)容！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/130288.html
摘要：一旦聲明，常量的值不能被改變。頂層對(duì)象的屬性頂層對(duì)象，瀏覽器中指的是對(duì)象，在中指的是對(duì)象。中新增了兩個(gè)命令和，命令用于暴露出模塊對(duì)外的接口，而則用于輸入某一模塊。 1.聲明變量的關(guān)鍵字：const 和 let JavaScript ES6中引入了另外兩個(gè)聲明變量的關(guān)鍵字：const和let。在ES6中，我們將很少能看到var了。 const關(guān)鍵字 const聲明一個(gè)只讀的常量。一旦聲明...
摘要：以下簡(jiǎn)稱是語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的是在年發(fā)布的，所以又稱。命令用于規(guī)定模塊的對(duì)外接口，命令用于輸入其他模塊提供的功能。需要特別注意的是，命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系。 ECMAScript 6（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015。 最常用的ES6...
摘要：該模塊實(shí)現(xiàn)方案主要包含與這兩個(gè)關(guān)鍵字，其允許某個(gè)模塊對(duì)外暴露部分接口并且由其他模塊導(dǎo)入使用。由于在服務(wù)端的流行，的模塊形式被不正確地稱為。以上所描述的模塊載入機(jī)制均定義在中。 最近一直在搞基礎(chǔ)的東西，弄了一個(gè)持續(xù)更新的github筆記，可以去看看，誠(chéng)意之作（本來(lái)就是寫(xiě)給自己看的……）鏈接地址：Front-End-Basics 此篇文章的地址：JavaScript的模塊 基礎(chǔ)筆記...
摘要：我寫(xiě)過(guò)一些開(kāi)源項(xiàng)目，在開(kāi)源方面有一些經(jīng)驗(yàn)，最近開(kāi)到了阮老師的微博，深有感觸，現(xiàn)在一個(gè)開(kāi)源項(xiàng)目涉及的東西確實(shí)挺多的，特別是對(duì)于新手來(lái)說(shuō)非常不友好最近我寫(xiě)了一個(gè)，旨在從多方面快速幫大家搭建一個(gè)標(biāo)準(zhǔn)的庫(kù)，本文將已為例，介紹寫(xiě)一個(gè)開(kāi)源庫(kù)的知識(shí) 我寫(xiě)過(guò)一些開(kāi)源項(xiàng)目，在開(kāi)源方面有一些經(jīng)驗(yàn)，最近開(kāi)到了阮老師的微博，深有感觸，現(xiàn)在一個(gè)開(kāi)源項(xiàng)目涉及的東西確實(shí)挺多的，特別是對(duì)于新手來(lái)說(shuō)非常不友好 show...
摘要：例如我們導(dǎo)入模塊，可以這么導(dǎo)入桃翁歡迎關(guān)注公眾號(hào)前端桃園報(bào)錯(cuò)不能定義相同名字變量報(bào)錯(cuò)，不能重新賦值小豬可以看到導(dǎo)入綁定這里不理解綁定，文章后面會(huì)解釋時(shí)，形式類似于對(duì)象解構(gòu)，但實(shí)際上并無(wú)關(guān)聯(lián)。 歡迎訪問(wèn)個(gè)人站點(diǎn) 簡(jiǎn)介 何為模塊 一個(gè)模塊只不過(guò)是一個(gè)寫(xiě)在文件中的 JavaScript 代碼塊。 模塊中的函數(shù)或變量不可用，除非模塊文件導(dǎo)出它們。 簡(jiǎn)單地說(shuō)，這些模塊可以幫助你在你的模塊中編寫(xiě)...
閱讀 506·2023-03-27 18:33
閱讀 709·2023-03-26 17:27
閱讀 607·2023-03-26 17:14
閱讀 577·2023-03-17 21:13
閱讀 503·2023-03-17 08:28
閱讀 1755·2023-02-27 22:32
閱讀 1262·2023-02-27 22:27
閱讀 2067·2023-01-20 08:28
