首頁猿問從清單 json 動態更新...

從清單 json 動態更新 href/src 屬性

JavaScript

繁花不似錦 2021-12-02 19:22:28

我正在通過讀取 manifest.json 文件動態更新 html src/href 屬性。但我很確定我這樣做的方式沒有遵循最佳實踐。我找不到有關該主題的任何內容。為了更新我的 html 中的鏈接，閱讀我的 manifest.json 的理想方式是什么？我所做的： <link id="maincss" rel="stylesheet"></head><body> <script id="mainscript"></script> <script> function readTextFile(file, callback) { var rawFile = new XMLHttpRequest(); rawFile.overrideMimeType("application/json"); rawFile.open("GET", file, true); rawFile.onreadystatechange = function() { if (rawFile.readyState === 4 && rawFile.status == "200") { callback(rawFile.responseText); } } rawFile.send(null); } readTextFile("/dist/manifest.json", function(text){ var data = JSON.parse(text); document.getElementById('mainscript').setAttribute('src', '/dist/'+data.main[1]); document.getElementById('maincss').setAttribute('href', '/dist/'+data.main[0]); }); </script>您可以看到，一旦我閱讀了文件，我就為 javascript 設置了 src 屬性，為 css 設置了 href 屬性。我的 manifest.json ：{"main":["mycss.798d79ab87daa2i3df123.css","main.f8aaae15e396b637e82e.js"]}

查看完整描述

1 回答

繁星coding

TA貢獻1797條經驗獲得超4個贊

看起來您正在嘗試將 JavaScript 和 CSS 外部化，以便您可以在應用程序之外更改它們，而無需進行重新部署（或類似的操作）。

我認為這個用例有更干凈的解決方案，但考慮到您的設置，我只是稍微清理一下，讓它更靈活一點。

我要解決的第一件事是：

這可能不是問題，但這實際上只是將您鎖定在單個 css 文件中。如果您需要添加另一個文件怎么辦？或者它可能是不同的文件類型（如字體樣式）。

話雖如此，我會完全放棄占位符元素。顯然，您引用占位符（mainscript、maincss）的方式也將被拋棄。

對于初學者，我會重構您的json文件以使其更具可擴展性，然后，我基本上會創建一個“迷你模塊加載器”

這是我會做的：

// Fake HTTP Get that returns your manifest file

const fakeGetRequest = () => {

return [{

"type": "link",

"src": "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",

{

"type": "script",

"src": "https://code.jquery.com/jquery-3.3.1.slim.min.js"

}

];

}

// Helper function to centralize the creation of the reference tag

const createRef = (src, type) => {

switch (type) {

case 'script':

const script = document.createElement('script');

script.src = src;

return script;

case 'link':

const link = document.createElement('link');

link.rel = 'stylesheet';

link.href = src;

return link;

}

return null;

}

// Your manifest.json

const manifest = fakeGetRequest();

// Iterate over your manifest and append things where you want them

manifest.forEach(item => {

const ref = createRef(item.src, item.type);

switch (item.type) {

case 'link':

document.head.appendChild(ref);

break;

case 'script':

document.body.appendChild(ref);

break;

}

});

這將使您能夠添加任意數量的腳本/css 引用，并且您的代碼將始終知道如何附加它們，無論您要附加多少。由于您的清單文件現在是可配置的，并且您的頁面中有代碼知道如何將其轉換為有意義的內容，因此支持不同的文件類型（例如圖像或您想放入的任何其他內容）需要將該類型添加到您的代碼中它知道如何處理它。

我在清單 ( srcand type) 中只有兩個屬性，但實際上，您可能需要諸如 order 之類的東西（也許需要先引用一個依賴項），另一個屬性，如果您希望將其附加到head或body，等等...

長話短說，我認為您擁有的一切都很好，那里確實沒有太多需要改進的地方。您唯一可以顯著改進的是可擴展性（如果需要）。

反對回復 2021-12-02

1 回答
0 關注
202 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從清單 json 動態更新 href/src 屬性

從清單 json 動態更新 href/src 屬性

1 回答

添加回答