中興AX5400Pro+上手體驗：再升級 雙2.5G網(wǎng)口+USB 3.0這次全都有
2021年11月的時候，中興先后發(fā)布了兩款路由器產(chǎn)品，中興AX5400和中興AX5400 Pro，從產(chǎn)品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產(chǎn)品可以說是完全沒一點關系
在過去的幾個月里，我在開發(fā)離線瀏覽器工具時，我自己反復搜索我的JavaScript 文件以檢索舊的代碼片段。
顯然微分了一個無限數(shù)。具有不同顏色的重疊駕駛路線對于任何觀看者來說都更容易比較和對比地圖可視化上顯示的各種路線。因此，動態(tài)生成不同的顏色是必要的，可以通過以下方式實現(xiàn)：
function generateRandomHexColor() { let colorGenerated="#" + (Math.random() * 0xfffff * 1000000).toString(16).slice(0, 6); if(colorGenerated !== "#0000ff" && colorGenerated !== "#ff0000") { return colorGenerated; } colorGenerated="#" + (Math.random() * 0xfffff * 1000000).toString(16).slice(0, 6);}對于地圖服務提供商返回的每條路線，我都合并了路線 JSON 數(shù)據(jù)輸出的導出功能。因此，為了區(qū)分 JSON 對象中的 String、Float、Integer、Boolean 等對象類型，我選擇對其進行顏色編碼，如下所示：
上述效果可以通過CSS和JavaScript來實現(xiàn)。
JavaScript 代碼：
function syntaxHighlight(json) { json = json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); return json.replace(/("(//u[a-zA-Z0-9]{4}|//[^u]|[^//"])*"(/s*:)?|/b(true|false|null)/b|-?/d+(?:/./d*)?(?:[eE][+/-]?/d+)?)/g, function (match) { var cls = "number"; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = "key"; } else { cls = "string"; } } else if (/true|false/.test(match)) { cls = "boolean"; } else if (/null/.test(match)) { cls = "null"; } return "<span class='" + cls + "'>" + match + "</span>"; });}CSS代碼：
.string { color: green; }.number { color: darkorange; }.boolean { color: blue; }.null { color: magenta; }.key { color: red; }window.addEventListener('beforeunload', (event) => { event.preventDefault(); event.returnValue = '';});
上面的代碼片段對于用戶在輸入字段中輸入了未保存的數(shù)據(jù)并且在頁面卸載時會丟失的情況特別有用。在上圖中，用戶上傳多個圖像文件后，瀏覽器會提示用戶是否已保存圖像輸出以防止數(shù)據(jù)丟失。
function readFileAsB64(file) { return new Promise((resolve,reject) => { let fileredr = new FileReader(); fileredr.onload = () => resolve([fileredr.result, file.name]); fileredr.onerror = (err) => reject(err); fileredr.readAsDataURL(file); });}var uploadFile=document.getElementById('uploadFile'); // input[type='file']uploadFile.addEventListener('change', (ev) => { if (!window.FileReader) { alert('Your browser does not support HTML5 "FileReader" function required to open a file.'); } else { let filesArr=ev.target.files; let fileReaders=[]; for(let f in filesArr) { if(!isNaN(f)) fileReaders.push(readFileAsB64(filesArr[f])) } Promise.all(fileReaders).then((outputArrs) => { for(let o in outputArrs) { if(!isNaN(o)) { let fileArr=outputArrs[o]; // [fileredr.result, file.name] /* TO DO LOGIC HERE */ let image = new Image(); image.src = fileArr[0]; image.title = fileArr[1]; image.height = 100; document.body.appendChild(image); } } }); }});上面的代碼片段確保在瀏覽器繼續(xù)執(zhí)行注釋后的代碼邏輯之前，所有上傳的圖像文件都已編碼為 Base64 字符串（fileredr.readAsDataURL(file);）：
/* TO DO LOGIC HERE */
9. insertAdjacentHTML — 開始之前 | 開始之后 | 前言 | 尾聲
回顧第 1) 點中的屏幕截圖，可以通過 insertAdjacentHTML(<position>,<HTML String>) 將 HTML 附加到元素：
<Element>.insertAdjacentHTML('beforeend'|'afterbegin'|'beforeend'|'afterend', <HTML String>);下面是每個選項相對于 <Element>（即 <p></p>）所指的位置的說明：
<!-- beforebegin --><p> <!-- afterbegin --> foo <!-- beforeend --></p><!-- afterend -->由于在第 1 點）中，目標是附加額外的表行 (<tr></tr>)，因此使用了 beforeend 位置。
由于我在業(yè)余時間創(chuàng)建的大多數(shù)離線瀏覽器實用程序都要求用戶上傳數(shù)據(jù)文件，其中一些文件需要為 JSON 格式，因此這是一種對 JSON 文件進行數(shù)據(jù)格式驗證檢查的簡單直接的方法是：
function isValidJSON(str) { try { JSON.parse(str); return true; } catch (e) { return false; }}// returns a Booleanfunction encodeHTMLChars(rawStr) { return rawStr.replace(/[/u00A0-/u9999<>/&]/g, ((i) => `&#${i.charCodeAt(0)};`));}要將文本 <img> 顯示到 HTML 頁面上，必須按如下方式對字符串進行編碼：
var inputHTMLStr='<img>';var encodedHTMLStr=encodeHTMLChars(inputHTMLStr);console.log(encodedHTMLStr); // Output: <img>當需要在網(wǎng)頁上顯示 HTML 代碼片段時，這通常會派上用場，因為其原始形式（即“<img>”）會被瀏覽器自動解釋為 HTML DOM 元素，而不是用于顯示的原始文本。
2 個最未被充分利用的 JavaScript API 包括：DOMParser() 和 DOMParser.parseFromString()
盡管 xml-js 和 xml2js 等 npm 包很容易獲得，但該邏輯可以通過純 JavaScript 實現(xiàn)，如下所示：
function convertXMLtoJSON(xmlObj) { // adapted from https://davidwalsh.name/convert-xml-json var obj = {}; if (xmlObj.nodeType == 1) { if (xmlObj.attributes.length > 0) { obj['@attributes'] = {}; for (var j = 0; j < xmlObj.attributes.length; j++) { var attribute = xmlObj.attributes.item(j); obj['@attributes'][attribute.nodeName] = attribute.nodeValue; } } } else if (xmlObj.nodeType == 3) { obj = xmlObj.nodeValue; } // Iterate through all child nodes // Use recursive to assign nested nodes if (xmlObj.hasChildNodes()) { for(var i = 0; i < xmlObj.childNodes.length; i++) { var item = xmlObj.childNodes.item(i); var nodeName = item.nodeName; if (typeof(obj[nodeName])==='undefined') { obj[nodeName] = convertXMLtoJSON(item); } else { if (typeof(obj[nodeName].push)==='undefined') { var old = obj[nodeName]; obj[nodeName] = []; obj[nodeName].push(old); } obj[nodeName].push(convertXMLtoJSON(item)); } } } return obj;}/* USAGE: Sample xmlText */var xmlText = '<bookstore><book>' +'<title>Everyday Italian</title>' +'<author>Giada De Laurentiis</author>' +'<year>2005</year>' +'</book></bookstore>';var xmlParser=new DOMParser();var xmlObj=xmlParser.parseFromString(xmlText, 'text/xml');var jsnotallow=convertXMLtoJSON(xmlObj);console.log(jsonObj);// Output: {"bookstore":{"book":{"title":{"#text":"Everyday Italian"},"author":{"#text":"Giada De Laurentiis"},"year":{"#text":"2005"}}}}聲明：上述代碼邏輯最初由 David Walsh 在 Convert XML to JSON 中實現(xiàn)。
我認為有用且值得分享，所以就把它加載進來了。
以上就是我今天這篇文章想與你分享的30個有用的JavaScript 代碼片段中的前面12個代碼段，剩下的18個將在下篇文章中與你分享。
今天內(nèi)容到此結(jié)束，希望對你有所幫助，最后，感謝你的閱讀。
本文鏈接：http://www.www897cc.com/showinfo-26-12727-0.html30 個有用的 JavaScript 代碼片段(上）
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號