30 個(gè)有用的 JavaScript 代碼片段(上）
在過去的幾個(gè)月里，我在開發(fā)離線瀏覽器工具時(shí)，我自己反復(fù)搜索我的JavaScript 文件以檢索舊的代碼片段。
因此，我認(rèn)為使用以下常用 JavaScript 方法的編譯列表作為參考可能會(huì)讓那些與我有類似用例的其他人受益。
我總共整理了30個(gè)我認(rèn)為比較有用的 JavaScript 代碼段，因?yàn)槲恼缕脑?，我分了上下兩篇，今天這篇文章中有12個(gè)代碼段，剩下的18個(gè)在下篇內(nèi)容中跟大家分享。
1.文件內(nèi)容上傳
var selectContent=document.getElementById("selectContent");
var contentForSelection=document.getElementById("contentForSelection");selectContent.onchange=function(e) {
if (!window.FileReader) {
alert("Your browser does not support HTML5 'FileReader' function required to open a file.");
} else {
let fileis = this.files[0];
let fileredr = new FileReader();
fileredr.onload = function (fle) {
let filecont = fle.target.result;
contentForSelection.value=filecont;
};
//fileredr.readAsArrayBuffer(fileis);
fileredr.readAsText(fileis);
}
};
在上面的示例中，由于我選擇導(dǎo)入的文件是文本格式，因此使用方法 readAsText 而不是 readAsArrayBuffer。使用 readAsArrayBuffer 的實(shí)例包括讀取圖像流或讀取 ZIP 存檔文件。成功導(dǎo)入后，文件內(nèi)容將自動(dòng)呈現(xiàn)到元素 id 為“contentForSelection”的文本區(qū)域中。
2. 保存文件內(nèi)容
var saveBtn=document.getElementById("saveBtn");
var cnotallow=document.getElementById("contentForSelection");
saveBtn.notallow=function() {
let txtCnotallow=contentForSelection.value;
if (!window.Blob) {
alert("Your browser does not support HTML5 'Blob' function required to save a file.");
} else {
let textblob = new Blob([txtContent], {
type: "text/plain"
});
let dwnlnk = document.createElement("a");
dwnlnk.download = "output.txt";
dwnlnk.innerHTML = "Download File";
if (window.webkitURL != null) {
dwnlnk.href = window.webkitURL.createObjectURL(textblob);
}
dwnlnk.click();
}
};
上述代碼片段通常在在線筆記應(yīng)用程序中實(shí)現(xiàn)，以便用戶導(dǎo)出其輸出?；蛘撸跀?shù)據(jù)/代碼格式化程序等網(wǎng)絡(luò)實(shí)用程序中，通常也會(huì)提供[保存]功能，以允許用戶將后續(xù)格式化的文本內(nèi)容保存到本地存儲(chǔ)文件中。
3.復(fù)制到剪貼板
復(fù)制到剪貼板是基于瀏覽器的設(shè)置中的另一個(gè)經(jīng)典功能。通常，如果轉(zhuǎn)換后的輸出僅用于 1-Off 任務(wù)，則無需將輸出保存到文件，而使用以下 JS 代碼片段會(huì)更合適：
var copyBtn=document.getElementById("copyBtn");
var cnotallow=document.getElementById("contentForSelection");
copyBtn.notallow=function(evt) {
copyBtn.nextElementSibling.innerHTML="";
copyTransformedOutput("contentForSelection");
let smallEle=evt.currentTarget.nextElementSibling;
smallEle.innerHTML="<span style='color:green'> Copied to Clipboard!</span>";
};
function copyTransformedOutput(inputEleId) {
let copyText = document.getElementById(inputEleId);
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
navigator.clipboard.writeText(copyText.value);
}請(qǐng)注意，我選擇在成功復(fù)制代碼片段后顯示一條消息“已復(fù)制到剪貼板”。
因此，轉(zhuǎn)換后的輸出隨后可以粘貼到其他地方，而無需存儲(chǔ)到本地文件中以供使用。
4.查找并替換全部
雖然在最新的 JavaScript 控制臺(tái)中，此功能當(dāng)前是內(nèi)置的，但由于其實(shí)現(xiàn)的獨(dú)創(chuàng)性和簡單性，了解以下 JavaScript 函數(shù)仍然是相關(guān)且有用的：
function replaceAll(inputStr,toReplace,replaceWith) {
return inputStr.split(toReplace).join(replaceWith);
}例如，如果我想在文本區(qū)域中將“id”替換為“ID”：
代碼片段的其余部分如下：
var replaceBtn=document.getElementById("replaceBtn");
replaceBtn.notallow=function() {
let toFind=document.getElementById("ToFind").value;
let replaceWith=document.getElementById("ReplaceWith").value;
contentForSelection.value=replaceAll(contentForSelection.value,toFind,replaceWith);
};5. 生成隨機(jī)十六進(jìn)制顏色
我發(fā)現(xiàn)這種 JavaScript 方法沒有得到充分重視的一種情況是，當(dāng)我必須將多條駕駛路線渲染到同一個(gè) Web 應(yīng)用程序上時(shí)：
顯然微分了一個(gè)無限數(shù)。具有不同顏色的重疊駕駛路線對(duì)于任何觀看者來說都更容易比較和對(duì)比地圖可視化上顯示的各種路線。因此，動(dòng)態(tài)生成不同的顏色是必要的，可以通過以下方式實(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);
}6. 突出顯示 JSON 語法
對(duì)于地圖服務(wù)提供商返回的每條路線，我都合并了路線 JSON 數(shù)據(jù)輸出的導(dǎo)出功能。因此，為了區(qū)分 JSON 對(duì)象中的 String、Float、Integer、Boolean 等對(duì)象類型，我選擇對(duì)其進(jìn)行顏色編碼，如下所示：
上述效果可以通過CSS和JavaScript來實(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;
}7. 通知未保存的更改
window.addEventListener('beforeunload', (event) => {
event.preventDefault();
event.returnValue = '';
});
上面的代碼片段對(duì)于用戶在輸入字段中輸入了未保存的數(shù)據(jù)并且在頁面卸載時(shí)會(huì)丟失的情況特別有用。在上圖中，用戶上傳多個(gè)圖像文件后，瀏覽器會(huì)提示用戶是否已保存圖像輸出以防止數(shù)據(jù)丟失。
8. 異步上傳多個(gè)文件
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) 點(diǎn)中的屏幕截圖，可以通過 insertAdjacentHTML(<position>,<HTML String>) 將 HTML 附加到元素：
<Element>.insertAdjacentHTML('beforeend'|'afterbegin'|'beforeend'|'afterend', <HTML String>);下面是每個(gè)選項(xiàng)相對(duì)于 <Element>（即 <p></p>）所指的位置的說明：
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->由于在第 1 點(diǎn)）中，目標(biāo)是附加額外的表行 (<tr></tr>)，因此使用了 beforeend 位置。
10. 檢查 JSON 字符串是否有效
由于我在業(yè)余時(shí)間創(chuàng)建的大多數(shù)離線瀏覽器實(shí)用程序都要求用戶上傳數(shù)據(jù)文件，其中一些文件需要為 JSON 格式，因此這是一種對(duì) JSON 文件進(jìn)行數(shù)據(jù)格式驗(yàn)證檢查的簡單直接的方法是：
function isValidJSON(str) {
try {
JSON.parse(str);
return true;
} catch (e) {
return false;
}
}
// returns a Boolean11. 將原始 HTML 字符串編碼為 Unicode 實(shí)體
function encodeHTMLChars(rawStr) {
return rawStr.replace(/[\u00A0-\u9999<>\&]/g, ((i) => `&#${i.charCodeAt(0)};`));
}要將文本 <img> 顯示到 HTML 頁面上，必須按如下方式對(duì)字符串進(jìn)行編碼：
var inputHTMLStr='<img>';
var encodedHTMLStr=encodeHTMLChars(inputHTMLStr);
console.log(encodedHTMLStr);
// Output: <img>當(dāng)需要在網(wǎng)頁上顯示 HTML 代碼片段時(shí)，這通常會(huì)派上用場，因?yàn)槠湓夹问剑础?lt;img>”）會(huì)被瀏覽器自動(dòng)解釋為 HTML DOM 元素，而不是用于顯示的原始文本。
12. 將 XML 轉(zhuǎn)換為 JSON
2 個(gè)最未被充分利用的 JavaScript API 包括：DOMParser() 和 DOMParser.parseFromString()
盡管 xml-js 和 xml2js 等 npm 包很容易獲得，但該邏輯可以通過純 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)來了。
總結(jié)
以上就是我今天這篇文章想與你分享的30個(gè)有用的JavaScript 代碼片段中的前面12個(gè)代碼段，剩下的18個(gè)將在下篇文章中與你分享。
今天內(nèi)容到此結(jié)束，希望對(duì)你有所幫助，最后，感謝你的閱讀。
