30 個有用的 JavaScript 代碼片段(下）

作者：佚名 2023-10-10 16:16:05

今天這篇文章，接上昨天的《30 個有用的 JavaScript 代碼片段(上）》，我們把剩下的18個代碼片段分享在這篇文章中。

現在，我們就開始這篇文章的內容吧。

13. 創建一個 <img> DOM 元素

// Code snippet to render <img> DOM element on the fly
const loadImage = (url) => new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', (err) => reject(err));
    img.src = url;
});

// __USAGE Example__
var uploadFileInput=document.createElement('input');
uploadFileInput.type='file';
uploadFileInput.id='uploadFileInput';
document.body.appendChild(uploadFileInput);


function readFileAsDataURL(file) {
    return new Promise((resolve,reject) => {
        let fileredr = new FileReader();
        fileredr.onload = () => resolve(fileredr.result);
        fileredr.onerror = () => reject(fileredr);
        fileredr.readAsDataURL(file);
    });
}


uploadFileInput.addEventListener('change', async (evt)=> {
  var file = evt.currentTarget.files[0];
    if(!file) return;


    var b64str = await readFileAsDataURL(file);
    var _img = await loadImage(b64str);
    _img['style']['width']=`${_img.naturalWidth}px`;
    _img['style']['height']=`${_img.naturalHeight}px`;
    _img['style']['margin']='2px auto';
    _img['style']['display']='block';
    document.body.appendChild(_img);
}, false);

注意：雖然大多數 HTML 元素節點的屬性（例如 <div> <p>）是可訪問的并且不需要“load”事件的偵聽器，但 <img> 是此規則的一個例外（另一個唯一的例外是 < 腳本>)

因此，如果 document.createElement('img') 沒有返回 Promise：

var loadedImg=document.createElement('img');
loadedImg.src=<dataURL>; // dataURL refers to the encoded image data

變量loadedImg不會被渲染，因為在分配屬性src時它仍然是未定義的。

14. 刪除所有嵌套子節點

const removeAllChildNodes = ((parentEle) => parentEle.children.length > 0  ? parentEle.removeChild(parentEle.children[0]) : null);

// __USAGE Example__
const _scale = window.devicePixelRatio*2;
const size = 250;
const fontSize=size/_scale;


var canvasDisplay=document.createElement('div');
canvasDisplay['style']['width']=`${size+4}px`;
canvasDisplay['style']['height']=`${size+4}px`;
canvasDisplay['style']['margin']='1px auto';
document.body.appendChild(canvasDisplay);


var iconBtn_1=document.createElement('button');
iconBtn_1.type='button';
iconBtn_1.value='??';
iconBtn_1.innerText='??';
document.body.appendChild(iconBtn_1);


var iconBtn_2=document.createElement('button');
iconBtn_2.type='button';
iconBtn_2.value='??';
iconBtn_2.innerText='??';
document.body.appendChild(iconBtn_2);


function setIcon(icon) {
  var canvas=document.createElement('canvas');
  canvas.width=size;
  canvas.height=size;
  canvas['style']['margin']='1px auto';
  canvas['style']['width']=`${fontSize}px`;
  canvas['style']['height']=`${fontSize}px`;
  canvas['style']['border']='1px dotted #6c757d';
  canvas['style']['background']='transparent';


  var ctx=canvas.getContext('2d');
  ctx.scale(_scale,_scale);
  ctx.font = `${fontSize}px Segoe Ui Emoji`;
  ctx.textAlign = 'center';
  ctx.textBaseline='middle';
  ctx.globalAlpha=1.0;
  ctx.fontVariantCaps='unicase';
  ctx.filter='none';
  ctx.globalCompositeOperation='source-over';
  ctx.imageSmoothingEnabled=true;
  ctx.imageSmoothingQuality='high';
  ctx.letterSpacing='0px';
  ctx.lineWidth=0;
  ctx.shadowColor='rgba(0, 0, 0, 0)';
  ctx.strokeStyle='#000000';
  ctx.fillStyle='#ffffff';


  const _x=((canvas.width/_scale)/2);
  const _y=((canvas.height/_scale)/2);
  ctx.fillText(icon, _x, _y);


  removeAllChildNodes(canvasDisplay);
  canvasDisplay.appendChild(canvas);
}


iconBtn_1.addEventListener('click', ()=> {
  setIcon(iconBtn_1.value);
});
iconBtn_2.addEventListener('click', ()=> {
  setIcon(iconBtn_2.value);
});

使用示例：

注意：函數removeAllChildNodes()使用遞歸來刪除所有嵌套元素。這對于防止先前不需要的子節點與后續附加的子節點累積是必要的，如下所示：

15. 選擇文本并將其復制到剪貼板 — 表單輸入和其他 HTML DOM 元素

function selectCopyText(nodeId) {
    let isVal=true;
    let node = document.getElementById(nodeId);
    try {
        node.select();
        try { node.setSelectionRange(0, 99999);} catch(err0) {}
    } catch(err) {
        isVal=false;
        if (document.body.createTextRange) {
            const range = document.body.createTextRange();
            range.moveToElementText(node);
            range.select();
        } else if (window.getSelection) {
            const selection = window.getSelection();
            const range = document.createRange();
            range.selectNodeContents(node);
            selection.removeAllRanges();
            selection.addRange(range);
        } else { console.warn("Could not select text in node: Unsupported browser."); }
    } finally { navigator.clipboard.writeText(isVal ? node.value : node.innerText);}
}

const strToCopy = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra accumsan in nisl nisi scelerisque eu ultrices. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Sodales ut etiam sit amet nisl purus.';


var _copyBtn=document.createElement('button');
_copyBtn.type='button';
_copyBtn.value='toCopy';
_copyBtn.innerText='Copy Textarea';


var _textarea=document.createElement('textarea');
_textarea.id='toCopy';
_textarea['style']['resize']='none';
_textarea['style']['width']='100%';
_textarea['style']['height']='100px';
_textarea['style']['display']='block';
_textarea.value=strToCopy;
document.body.appendChild(_copyBtn);
document.body.appendChild(_textarea);


var _copyBtn2=document.createElement('button');
_copyBtn2.type='button';
_copyBtn2.value='toCopy2';
_copyBtn2.innerText='Copy DIV';


var _div=document.createElement('_div');
_div.id='toCopy2';
_div['style']['width']='100%';
_div['style']['height']='100px';
_div['style']['display']='block';
_div['style']['border']='1px dashed #000000';
_div.innerText=strToCopy;
document.body.appendChild(_copyBtn2);
document.body.appendChild(_div);


_copyBtn.addEventListener('click', ()=> {
  selectCopyText(_copyBtn.value);
});
_copyBtn2.addEventListener('click', ()=> {
  selectCopyText(_copyBtn2.value);
});

使用示例：

雖然“復制到剪貼板”是最普遍需要的 JavaScript 功能之一，但還值得注意的是，所需的文本內容同樣可能包含在表單元素中，例如 - <input type='text'> <textarea > 或嵌入 HTML DOM 元素中，例如 <div> <p>。

因此，此函數解決了通過檢查 HTMLInputElement 或 HTMLDivElement 中是否存在文本內容來確定如何在 JavaScript 中實現文本選擇的問題。

然后分別選擇屬性.value 和.innerText。

16. 將 JSON 對象數組轉換為 CSV 文本

function rowJSONToCSV(rowJSONObj) {
    let csvOutputStr='';
    let allHeaders={};
    for(let obj of rowJSONObj) {
      for(let k in obj) { allHeaders[k]=''; }
    }
    let allHeadersArr=Object.keys(allHeaders);
    let headerStr=JSON.stringify(allHeadersArr);
    headerStr=headerStr.substring(1,headerStr.length-1);
    csvOutputStr+=headerStr + '\n';


    for(let obj of rowJSONObj) {
      let allValuesArr=[];
      for(let headerField of allHeadersArr) {
        let rowVal=obj[headerField];
        (typeof rowVal !== 'undefined') ? allValuesArr.push(rowVal) : allValuesArr.push('NULL')
      }
      let rowStr=JSON.stringify(allValuesArr);
      rowStr=rowStr.substring(1,rowStr.length-1);
      csvOutputStr+=rowStr + '\n';
    }
    return Promise.resolve(csvOutputStr);
}

var uploadFileInput=document.createElement('input');
uploadFileInput.type='file';
uploadFileInput.id='uploadFileInput';
document.body.appendChild(uploadFileInput);


function readFileAsText(file) {
    return new Promise((resolve,reject) => {
        let fileredr = new FileReader();
        fileredr.onload = () => resolve(fileredr.result);
        fileredr.onerror = () => reject(fileredr);
        fileredr.readAsText(file);
    });
}
uploadFileInput.addEventListener('change', async (evt)=> {
    var file = evt.currentTarget.files[0];
    if(!file) return;


    var jsonStr = await readFileAsText(file);
    var inputJSONObj = JSON.parse(jsonStr);
    var divOne = document.createElement('div');
    divOne['style']['font-family']='Consolas';
    divOne['style']['height']='250px';
    divOne['style']['weight']='100%';
    divOne['style']['margin']='2px auto';
    divOne['style']['overflow']='auto';
    divOne['style']['border']='1px dashed #17a2b8';
    var csvStrOutput=await rowJSONToCSV(inputJSONObj);
    divOne.innerText=csvStrOutput;
    document.body.appendChild(divOne);
}, false);

使用示例

演示示例數據文件的鏈接：icd10_data.json

輸出 CSV 文件的鏈接：icd10_data.csv

基本原理

按照慣例，我傾向于使用插件 json2csv.js（最初來自 https://www.npmjs.com/package/json2csv）來進行 JSON 到 CSV 的轉換。

然而，對于超過 50MB 的大文件，遞歸算法超出了其最大堆棧限制，當我嘗試將文件上傳到我開發的 Web 實用程序時，我發現了這一點：https://tableau-data-utility。onrender.com/ 在 [?? Spatial?CSV] 選項卡上

由于地理空間數據集往往超過 50MB，實現上述將 JSON 轉換為 CSV 的函數解決了遞歸問題。

局限性

僅適用于深度級別為 1 的嵌套 JSON 對象。如果輸入深度級別更高的 JSON 對象，則效果不佳。例如，以下內容將失敗，因為第一個條目“喜歡”的深度級別 = 2

[
   { 
    "firstName":"John", 
    "lastName":"Doe",
    "likes": {
     "pets": ["dogs","cats"]
    }
   },
   { 
    "firstName":"Anna", 
    "lastName":"Smith" 
   }
]

17.DOMContentLoaded 事件監聽器

if (document.readyState === 'complete' || document.readyState !== 'loading' && !document.documentElement.doScroll) {
  callback();
} else {
  document.addEventListener('DOMContentLoaded', async() => {
    /* TO DO LOGIC HERE */
  });
}

<!DOCTYPE html>
  <html>  
    <meta charset='UTF-8'>
    <head>Demo (5)</head>  
    <body>  
      <p>?? Refresh webpage to run function "doSomething()".</p>
      <script>
        if (document.readyState === 'complete' || document.readyState !== 'loading' && !document.documentElement.doScroll) {
          callback();
        } else {
          document.addEventListener('DOMContentLoaded', async() => {
            function doSomething() {  
              alert('Hello!');  
            }
            doSomething();
          });
        }
</script>
    </body>
</html>

<!DOCTYPE html>
  <html>  
    <meta charset='UTF-8'>
    <head> 
      <head>Demo (5)</head>
      <script>  
         function doSomething() {  
            alert('Hello!');  
         }  
</script>  
    </head>  
    <body onload='doSomething()'>  
      <p>?? Refresh webpage to run function "doSomething()".</p>
    </body>
</html>

使用示例

當網頁加載后需要立即執行某個功能時，一種可能的方法是將 onload 事件嵌入到 <body> 標記中：

注意：一個常見的錯誤是執行 windows.onload 中嵌套的函數：

<!DOCTYPE html>
  <html>  
    <meta charset='UTF-8'>
    <head> 
      <head>Demo (5)</head>
      <script>
        windows.onload = function() {
          function doSomething() {  
              alert('Hello!');  
             }
        };
</script> 
    </head>  
    <body>  
      <p>?? Refresh webpage to run function "doSomething()".</p>
    </body>
</html>

因此，為了對所有嵌入的 JavaScript 代碼片段進行稍微更有條理的分區，請使用以下命令：

document.addEventListener('DOMContentLoaded', function() { ... });

可以考慮改為：

18. 將多個事件綁定到 HTML 元素

// Binding multiple events to a single element
function addMultipleEvents(eventsArray, targetElem, handler) {
  eventsArray.map((event) => targetElem.on(event, handler));
}


// Alt Version: Using 'addEventListener'
function addMultipleEvents(eventsArray, targetElem, handler) {
  eventsArray.map((event) => targetElem.addEventListener(event, handler));
}

// Noting the coordinates when map is pan or zoom etc.
// Built with Leaflet.js
var mapUrl="https://stamen-tiles.a.ssl.fastly.net/toner-hybrid/{z}/{x}/{y}.png";


var map = L.map("map");
var basemap=L.tileLayer(mapUrl, {
    detectRetina: true,
    maxZoom: 19,
    minZoom: 11,
    attributionControl: false
}).addTo(map);
function renderImageBounds() {
  imgBounds=map.getBounds();
  imgBounds_Left.innerHTML=imgBounds._southWest.lng;
  imgBounds_Right.innerHTML=imgBounds._northEast.lng;


  imgBounds_Bottom.innerHTML=imgBounds._southWest.lat;
  imgBounds_Top.innerHTML=imgBounds._northEast.lat;
}
function addMultipleEvents(eventsArray, targetElem, handler) {
  eventsArray.map((event) => targetElem.on(event, handler));
}
addMultipleEvents(['zoomend', 'dragend', 'viewreset', 'moveend', 'load', 'resize'], map, renderImageBounds);

使用示例

在我之前構建的網絡實用程序中，合并了跟蹤所顯示地圖的地理坐標的功能，如下所示：

19.清除瀏覽器緩存

清除單個網頁瀏覽器緩存的 JavaScript 如下：

const supportsLocalStorage = () => {
    if (!('localStorage' in window)) return false;
    try {
        localStorage.setItem('check', 'true');
        localStorage.getItem('check');
        localStorage.removeItem('check');
        return true;
    } catch (e) {
        return false;
    }
};
const hasLocalStorage = supportsLocalStorage();
/* Assume there is a <button id='clearCache' type='button'></button> */
/* HTML element in the DOM */
/*const clearCacheBtn = document.getElementById('clearCache');*/
/*clearCacheBtn.addEventListener('click', async()=> {*/
    requestAnimationFrame(() => {
        if (hasLocalStorage) {
            localStorage.clear();
            location.reload();
        }
    });
/*});*/

用例演示

在某些網頁上，以前的用戶輸入會有意保留在瀏覽器緩存中。例如，在 JSONEditor.com 上：

但是，當通過 JavaScript 控制臺以編程方式清除瀏覽器緩存時：

20. 以編程方式觸發 HTML 事件

// Note: Compatible for both IE8, IE9+ and other modern browsers
function triggerEvent(el, type) {
    let e = ( ('createEvent' in document) ? document.createEvent('HTMLEvents') : document.createEventObject() );
    if ('createEvent' in document) { 
      e.initEvent(type, false, true);
      el.dispatchEvent(e);
    } else { 
      e.eventType = type;
      el.fireEvent('on' + e.eventType, e);
    }
}

用例演示

假設以下 HTML 標記文檔：

<!DOCTYPE html>
<html>
  <head><title>Demo trigger() Method</title></head>
  <body>
      <div class='box-1'><h1>0</h1></div>
      <button id="btn1">Increase #1</button>
      <div class='box-2'><h1>0</h1></div>
      <button id='btn2'>Increase #2</button>
      <script>
        /* TO-DO */
</script>
  </body>
</html>

上面的triggerEvent()函數可以在上面的2個<script>標簽之間實現，如下所示：

function triggerEvent(el, type) {
    let e = ( ('createEvent' in document) ? document.createEvent('HTMLEvents') : document.createEventObject() );
    if ('createEvent' in document) { 
      e.initEvent(type, false, true);
      el.dispatchEvent(e);
    } else { 
      e.eventType = type;
      el.fireEvent('on' + e.eventType, e);
    }
}
document.querySelector('#btn1').addEventListener('click', () => {
  increase(document.querySelector('.box-1>h1'));
});
document.querySelector('#btn2').addEventListener('click', () => {
  triggerEvent(document.querySelector('#btn1'), 'click');
  increase(document.querySelector('.box-2>h1'));
});
function increase(obj) {
    let text = parseInt(obj.textContent, 10);
    obj.textContent = text + 1;
}

雖然， jQuery 插件有包裝函數 trigger() ，它輸出相同的結果。

<!-- import jQuery plugin -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js'></script>

// Sample jQuery code snippet at /* TO-DO */ between the 2 <script> tags:
$('#btn1').click(() => {
  increase($('.box-1>h1'));
});
$('#btn2').click(() => {
  $('#btn1').trigger('click');
  increase($('.box-2>h1'));
});
function increase(obj) {
  let text = parseInt(obj.text(), 10);
  obj.text(text + 1);
}

在首選更輕量級替代方案的情況下，可以考慮使用 functiontriggerEvent()。

21. 將 async-await 與 for 循環結合使用

下面的代碼片段調用 JSON API，其中每次迭代都會解析不同的參數 (i)，以按順序檢索 JSON 響應。

(async()=> {
    // Assume a <table id='datatable'></table> is in the HTML DOM
    const datatableTbody = document.querySelector('#datatable tbody');
    for (let i=1;i<=15;i++) {
      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i}`);
      const result = await response.json();
      datatableTbody.insertAdjacentHTML('beforeend', '<tr><td>'+Object.values(result).join('</td><td>')+'</td></tr>');
    }
})();

用例演示

通常，當呈現數據記錄以進行顯示時，每條記錄都是通過 API 調用獲取的。通過API返回所需的記錄，完整的代碼片段如下：

<!DOCTYPE html>
<html>
  <head>
    <title>async-await in a for-loop</title>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }
      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 4px;
      }
      table tbody tr:nth-child(odd) {
        background-color: #f1f1f1;
      }
</style>
  </head>
  <body>
  <table id='datatable'>
    <thead>
      <tr><th>userId</th><th>id</th><th>title</th><th>completed</th></tr>
    </thead>
    <tbody></tbody>
  </table>
  <script>
     (async()=> {
        const datatableTbody = document.querySelector('#datatable tbody');
        for (let i=1;i<=15;i++) {
          const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i}`);
          const result = await response.json();
          datatableTbody.insertAdjacentHTML('beforeend', '<tr><td>'+Object.values(result).join('</td><td>')+'</td></tr>');
        }
    })();
</script>

22. 將字符串轉換為帕斯卡大小寫（帶空格）

由于 JavaScript 沒有內置函數將每個單詞的首字母轉換為大寫，因此可以應用以下代碼片段：

const toPascalCase = (str) => ( (str.toLowerCase()).replace(/\w+/g, ((str) => ( str.charAt(0).toUpperCase()+str.substr(1) ).replace(/\r/g, '')) ) );
// Usage:
// let str = 'HeLLO world';
// console.log(toPascalCase(str));
// Result: 'Hello World'

用例演示

當從 API 返回的字母大小寫不一致時，為了視覺一致性，以帕斯卡大小寫顯示某些標簽可能更合適。

例如，在我的一個業余項目中——一個 Bus ETA Web 應用程序，檢索所有公交車站描述的 API 的字母大小寫不一致：

23. 將 Uint8Array 轉換為 Base64 字符串

除了純文本之外，JavaScript 還讀取其他格式的文件輸入，例如 ArrayBuffers（尤其是多媒體上傳）。從 ArrayBuffer 檢索文件數據作為 Base64 編碼字符串 (DataURL) 的函數如下：

// Uint8Array to Base64 Encoded String
const convertBitArrtoB64 = (bitArr) => ( btoa( bitArr.reduce((data, byte) => data + String.fromCharCode(byte), '') ) );

用例演示

對于某些庫，所有處理的文件輸入僅輸出為 Uint8Array。一個例子是 FFmpeg.wasm（歸功于吳杰羅姆），我在一個網絡應用程序中實現了它，用于對音頻編解碼器進行轉碼。在這個副項目中的用法如下：

// `data` is output as Uint8Array 
// assuming input format is mp3, `outputFileExt`='mp3'
const data = ffmpeg.FS('readFile', `output${outputFileExt}`);
let b64Str = convertBitArrtoB64(data);


// assuming converted output format is mp4, `outputFileMimeType` = 'mp4'
let encodedData=`data:${outputFileMimeType};base64,${b64Str}`;


// To generate download link and save output
let dwnlnk = document.createElement('a');
dwnlnk.download = `${saveFilename}${outputFileExt}`;
dwnlnk.href = encodedData;
dwnlnk.click();

24.將Base64字符串轉換為Uint8Array

反之，Uint8Array→DataURL轉換的逆過程如下：

// Base64 Encoded String to Uint8Array
const convertB64ToBitArr = (b64Str) => ( Uint8Array.from(atob( (b64Str.includes(';base64,') ? (b64Str.split(','))[1] : b64Str) ), (v) => v.charCodeAt(0)) );

25.獲取瀏覽器垂直滾動條寬度

function getScrollbarWidth() {
    const docEle=document.documentElement;
    const cssOverflowY=docEle.style.overflowY; // stores prev value
    docEle.style.overflowY='scroll'; // force scrollbar to appear
    const scrollbarWidth = window.innerWidth - docEle.clientWidth;
    docEle.style.overflowY=cssOverflowY; // reset to prev value


    return scrollbarWidth;
}
const sbWidth=getScrollbarWidth(); // 17


/* comments */
// In which case, scrollbar width is 17px for my browser 
// and width of elements should factor in this value in its css attributes

26. 將年、月和日添加到 Date() 對象

雖然 JavaScript 沒有特定于 Date() 對象的時間單位減法/加法的內置方法，但可以使用輔助方法來構造以下實用函數。

function addYears(date, n) {
    const dateCopy = new Date(date);
    dateCopy.setFullYear(dateCopy.getFullYear() + n);
    return dateCopy;
}
function addMonths(date, n) {
    const dateCopy = new Date(date);
    dateCopy.setMonth(dateCopy.getMonth() + n);
    return dateCopy;
}
function addDays(date, n) {
    const dateCopy = new Date(date);
    dateCopy.setDate(dateCopy.getDate() + n);
    return dateCopy;
}

使用示例：

const currentDate=new Date();
console.log(`Current date: ${currentDate}`);
console.log(`Current date + 11 years: ${addYears(currentDate, 11)}`);
console.log(`Current date + 11 months: ${addMonths(currentDate, 11)}`);
console.log(`Current date + 11 days: ${addDays(currentDate, 11)}`);


/* Sample output */
// Current date: Fri Sep 22 2023 23:52:57 GMT+0800 (Singapore Standard Time)
// Current date + 11 years: Fri Sep 22 2034 23:52:57 GMT+0800 (Singapore Standard Time)
// Current date + 11 months: Thu Aug 22 2024 23:52:57 GMT+0800 (Singapore Standard Time)
// Current date + 11 days: Tue Oct 03 2023 23:52:57 GMT+0800 (Singapore Standard Time)

27.從數組中刪除無效值，例如null和undefined

const removeInvalidVals = ((arr) => arr.filter(ele => (ele !== null && typeof ele !== 'undefined') ? true : false));

上面的函數從數組中刪除空值和未定義的值。一個常見的用例是從 API 調用的 JSON 響應中排除無效值。

使用示例：

let arr = [1, 3, undefined, 5, null, null, 8];
arr = removeInvalidVals(arr);
console.log(arr);


/* Expected output */
// [1, 3, 5, 8]

28. 數組中的唯一值

操作數組的另一個方便的實用函數是刪除其中的重復值。

const uniqueArr = ((arr) => (Array.from(new Set(arr))));

使用示例：

let arr = [1, 1, 3, 2, 5, 3, 4, 7, 7, 7, 8];
arr = uniqueArr(arr);
console.log(arr);


/* Expected output */
// [1, 3, 2, 5, 4, 7, 8]

29. 通過解析字符串創建新的 HTML DOM 元素

HTML <template> 標簽用于保存 HTML 內容以供稍后呈現。下面的函數 htmlToElement() 不是使用 createElement() 在 JavaScript 中從頭開始創建元素，而是直接從 HTML 字符串創建子節點。

function htmlToElement(html) {
    if (!(document.createElement("template").content)) {
        alert('Your browser does not support "template".');
        return;
    }
    let documentFragment = document.createDocumentFragment();
    let template = document.createElement('template');
    template.innerHTML = html.trim();
    for (let i = 0, e = template.content.childNodes.length; i < e; i++) {
        documentFragment.appendChild(template.content.childNodes[i].cloneNode(true));
    }
    return documentFragment;
}

使用示例

<!DOCTYPE html>
<html lang='en'>
  <head><meta charset='utf-8'></head>
  <body>
    <div id='pageContainer'></div>
  </body>
</html>

<!DOCTYPE html>
<html lang='en'>
  <head><meta charset='utf-8'></head>
  <body>
    <div id='pageContainer'></div>
  </body>
</html>

30. 打印網頁

/* Assume there is a <button> HTML element in the DOM */
// <button id='printPage' type='button'>Print</button>
const printPageBtn = document.getElementById('printPage');
printPageBtn.addEventListener('click', ()=> {
    requestAnimationFrame(() => {
        window.print();
    });
});

演示：

總結

到這里，我們的30個有用的JavaScript的代碼片段就分享完了，希望這些代碼能夠幫助到你。

責任編輯：華軒來源： web前端開發

JavaScrip 開發