5月iOS設(shè)備性能榜：M1 M2依舊是榜單前五
和上個(gè)月一樣，沒(méi)有新品發(fā)布的iOS設(shè)備性能榜的上榜設(shè)備并沒(méi)有什么更替，僅僅只有跑分變化而產(chǎn)生的排名變動(dòng)，剛剛開(kāi)始的蘋(píng)果WWDC2023，推出的產(chǎn)品也依舊是新款Mac Pro、新款Mac Stu
在過(guò)去的幾個(gè)月里，我在開(kāi)發(fā)離線瀏覽器工具時(shí)，我自己反復(fù)搜索我的JavaScript 文件以檢索舊的代碼片段。
顯然微分了一個(gè)無(wú)限數(shù)。具有不同顏色的重疊駕駛路線對(duì)于任何觀看者來(lái)說(shuō)都更容易比較和對(duì)比地圖可視化上顯示的各種路線。因此，動(dòng)態(tài)生成不同的顏色是必要的，可以通過(guò)以下方式實(shí)現(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);}對(duì)于地圖服務(wù)提供商返回的每條路線，我都合并了路線 JSON 數(shù)據(jù)輸出的導(dǎo)出功能。因此，為了區(qū)分 JSON 對(duì)象中的 String、Float、Integer、Boolean 等對(duì)象類(lèi)型，我選擇對(duì)其進(jìn)行顏色編碼，如下所示：
上述效果可以通過(guò)CSS和JavaScript來(lái)實(shí)現(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 = '';});
上面的代碼片段對(duì)于用戶(hù)在輸入字段中輸入了未保存的數(shù)據(jù)并且在頁(yè)面卸載時(shí)會(huì)丟失的情況特別有用。在上圖中，用戶(hù)上傳多個(gè)圖像文件后，瀏覽器會(huì)提示用戶(hù)是否已保存圖像輸出以防止數(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 — 開(kāi)始之前 | 開(kāi)始之后 | 前言 | 尾聲
回顧第 1) 點(diǎn)中的屏幕截圖，可以通過(guò) insertAdjacentHTML(<position>,<HTML String>) 將 HTML 附加到元素：
<Element>.insertAdjacentHTML('beforeend'|'afterbegin'|'beforeend'|'afterend', <HTML String>);下面是每個(gè)選項(xiàng)相對(duì)于 <Element>（即 <p></p>）所指的位置的說(shuō)明：
<!-- beforebegin --><p> <!-- afterbegin --> foo <!-- beforeend --></p><!-- afterend -->由于在第 1 點(diǎn)）中，目標(biāo)是附加額外的表行 (<tr></tr>)，因此使用了 beforeend 位置。
由于我在業(yè)余時(shí)間創(chuàng)建的大多數(shù)離線瀏覽器實(shí)用程序都要求用戶(hù)上傳數(shù)據(jù)文件，其中一些文件需要為 JSON 格式，因此這是一種對(duì) JSON 文件進(jìn)行數(shù)據(jù)格式驗(yàn)證檢查的簡(jiǎn)單直接的方法是：
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 頁(yè)面上，必須按如下方式對(duì)字符串進(jìn)行編碼：
var inputHTMLStr='<img>';var encodedHTMLStr=encodeHTMLChars(inputHTMLStr);console.log(encodedHTMLStr); // Output: <img>當(dāng)需要在網(wǎng)頁(yè)上顯示 HTML 代碼片段時(shí)，這通常會(huì)派上用場(chǎng)，因?yàn)槠湓夹问剑础?lt;img>”）會(huì)被瀏覽器自動(dòng)解釋為 HTML DOM 元素，而不是用于顯示的原始文本。
2 個(gè)最未被充分利用的 JavaScript API 包括：DOMParser() 和 DOMParser.parseFromString()
盡管 xml-js 和 xml2js 等 npm 包很容易獲得，但該邏輯可以通過(guò)純 JavaScript 實(shí)現(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 中實(shí)現(xiàn)。
我認(rèn)為有用且值得分享，所以就把它加載進(jìn)來(lái)了。
以上就是我今天這篇文章想與你分享的30個(gè)有用的JavaScript 代碼片段中的前面12個(gè)代碼段，剩下的18個(gè)將在下篇文章中與你分享。
今天內(nèi)容到此結(jié)束，希望對(duì)你有所幫助，最后，感謝你的閱讀。
本文鏈接：http://www.www897cc.com/showinfo-26-12727-0.html30 個(gè)有用的 JavaScript 代碼片段(上）
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： TIOBE 發(fā)布 10 月編程語(yǔ)言排行榜：Java 占比下跌 3.92% 成第四，C++ 躍升第三
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)