JS導入本地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)的最后不應以逗號結(jié)尾——理論上不應該但實際寫代碼追加數(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也相應地改后綴為txt,比如data.txt就行）。
也就是說這里注入的其實不是json數(shù)據(jù)，而是一段js代碼;只是這段代碼恰好定義了一個名為dataJson的object。
所以在相關(guān)js文件中導入/使用這個全局對象為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"這一小段可省略。
跟方法２的差別是這里導入的是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導入本地json文件數(shù)據(jù)的三類方法的文章就介紹到這了,更多相關(guān)JS導入本地json文件數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序返回上一級頁面的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單圖片拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了Node.js API詳解之 zlib模塊用法,結(jié)合實例形式分析了Node.js API中zlib模塊基本功能、函數(shù)使用方法與操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機數(shù)小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了JS獲取短信驗證碼倒計時的實現(xiàn)代碼,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了原生js實現(xiàn)的觀察者和訂閱者模式,結(jié)合簡單實例形式分析了js觀察者和訂閱者模式的相關(guān)原理與實現(xiàn)技巧,需要的朋友可以參考下2020-04-04
js實現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動顯示的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動顯示的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
js加強的經(jīng)典分頁實例，需要的朋友可以參考一下2013-03-03
下面小編就為大家?guī)硪黄狫avaScript使用atan2來繪制箭頭和曲線的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了javascript設(shè)計簡單的秒表計時器，該秒表將包括兩個按鈕和一個用于顯示時間的文本框，當單擊開始按鈕時開始計時，最小單位為0.01秒，此時再次單擊按鈕則停止計時，文本框顯示經(jīng)過的時間，需要的朋友可以參考下2015-11-11