JS導(dǎo)入本地json文件數(shù)據(jù)的三類方法舉例講解
這個本地json文件中往往保存一些（無需在js腳本中改動，又常需手動改動的一些各種設(shè)定之類的）靜態(tài)數(shù)據(jù)。
第一類：將本地數(shù)據(jù)視為網(wǎng)絡(luò)數(shù)據(jù)
使用fetch,XMLHttpRequest之類進行異步請求。
const jsnd=fetch('data.json')
.then(res=>res.json())
.then(data=>{console.log(data);return data})
.catch(err=>{console.log(err);})相關(guān)json文件數(shù)據(jù)需嚴格遵循json語法（比如[]內(nèi)的最后不應(yīng)以逗號結(jié)尾——理論上不應(yīng)該但實際寫代碼追加數(shù)據(jù)時還要回頭給前面的數(shù)據(jù)加個逗號真的很煩）不然編輯器會報警（雖然運行時一般并不會有數(shù)據(jù)讀取的問題，目前沒碰到過）。
異步通訊可能有點廢時，還需要有配套的(本地)webserver.
第二類：將本地數(shù)據(jù)以<script src="./data.json"></script>的形式“注入”為全局變量/對象
<!DOCTYPE html> <html> <head> …… <script src="./data.json"></script> </head> <body > …… </body> </html>
相關(guān)data.json文件(可自行命名)寫法會很不規(guī)范。需要在{}前加個“（全局）變量名=”：
dataJson={
原json數(shù)據(jù)
}把這個data.json文件后綴從.json改成.txt之類也能正常運轉(zhuǎn)（相關(guān)的html中的src也相應(yīng)地改后綴為txt,比如data.txt就行）。
也就是說這里注入的其實不是json數(shù)據(jù)，而是一段js代碼;只是這段代碼恰好定義了一個名為dataJson的object。
所以在相關(guān)js文件中導(dǎo)入/使用這個全局對象為json數(shù)據(jù)時（為求保險）宜加一個轉(zhuǎn)換過程，如：
const jsnd=JSON.parse(JSON.stringify(dataJson));
或
const jsnd=JSON.parse(dataJson); //JSON.stringify()的作用是將 JavaScript 對象轉(zhuǎn)換為 JSON 字符串，而JSON.parse()可以將JSON字符串轉(zhuǎn)為一個對象。
這方法無需webserver,但需要三方文件相互適配。只能用在有html的場合。
第三類：做一個專門放置這些數(shù)據(jù)的js文件，export之，再在需要的文件中import.
如：
//文件名sj.js
const sj1={
……
……
……
}
const sj2={
……
……
……
}
export {sj1,sj2}import {sj1,sj2} from './sj'思路其實是方法2改良版。
無需webserver（異步通訊）,兩方文件適配。不能再簡了。
……實際測試發(fā)現(xiàn)，這個方法的html文件在本地文件系統(tǒng)打開時會觸發(fā)跨域問題：Access to script at 'file:……' from origin 'null' has been blocked by CORS policy：……
最簡單的解決辦法還是配個（本地）服務(wù)器。這就又跟方法１沒太大區(qū)別了。
要想不配這個（本地）服務(wù)器，還是得在方法２上改良：
方法４：
<!DOCTYPE html> <html> <head> …… <script type="text/javascript" src="./data.js"></script> </head> <body > …… </body> </html>
／／type="text/javascript"這一小段可省略。
跟方法２的差別是這里導(dǎo)入的是js文件/js代碼段。里邊的內(nèi)容就是普通的js寫法。比如
const jsnd={
//json數(shù)據(jù)
}
const jsnd2={
//json數(shù)據(jù)
}上面這兩json變量/對象相當于直接定義在全局（window?）中?？梢栽谄渌械膉s文件中使用。而且是直接拿來就用。
無需webserver,無需JSON.parse();Fetch;或是import之類。
非常方便。適合沒有敏感數(shù)據(jù)，無需考慮安全問題的情況。
總結(jié)
到此這篇關(guān)于JS導(dǎo)入本地json文件數(shù)據(jù)的三類方法的文章就介紹到這了,更多相關(guān)JS導(dǎo)入本地json文件數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序基于ColorUI構(gòu)建皮皮蝦短視頻去水印組件
這篇文章主要介紹了微信小程序-基于ColorUI構(gòu)建皮皮蝦短視頻去水印組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-11-11
這篇文章主要介紹了原生js實現(xiàn)貪食蛇小游戲的思路詳解,，文中給大家寫出了注釋，幫助大家理解代碼，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了解決webpack多頁面內(nèi)存溢出的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
js加載之使用DOM方法動態(tài)加載Javascript文件
傳統(tǒng)上，加載Javascript文件都是使用script標簽，我們也可以使用DOM方法，動態(tài)加載Javascript文件，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-11-11
Bootstrap學(xué)習(xí)筆記 輪播（Carousel）插件
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點添加滑塊的方式。這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記 輪播（Carousel）插件,需要的朋友可以參考下2017-03-03
JS函數(shù)的call和apply的實現(xiàn)方法區(qū)別分析
這篇文章主要為大家介紹了JS函數(shù)的call和apply的實現(xiàn)方法區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
JS對象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對象的代碼
這篇文章主要介紹了JS對象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對象的代碼,需要的朋友可以參考下2017-08-08
如何用JS取得網(wǎng)址中的文件名...2006-08-08
這篇文章我們給大家總結(jié)了關(guān)于js中Array的方法及技巧，有需要的朋友們可以學(xué)習(xí)參考下。2018-09-09
這篇文章主要介紹了JS實現(xiàn)簡單的點贊與踩功能,涉及javascript針對頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-12-12