前端日常开发必备16 个JavaScript 代码片段记录

document.addEventListener('click', function (evt) {     // isClickedOutside is true if the clicked element is outside 'ele'     const isClickedOutside = !ele.contains(evt.target);   });

# Open the homepage   npm home PACKAGE_NAME   npm home react
# Open the repository   npm repo PACKAGE_NAME   npm repo react

const handler = function (e) {};   ele.addEventListener('event-name', handler, { once: true });

const formatSeconds = (s) =>     [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)]       .join(':')       .replace(/\b(\d)\b/g, '0$1')

const getUrlParams = (query) =>     Array.from(new URLSearchParams(query)).reduce(       (p, [k, v]) =>         Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),       {}     )
// Get query parameters   getUrlParams(location.query)   // { a: ['1', '4'], b: '2', c: '3' }   getUrlParams('?a=1&b=2&c=3&a=4')    // Get hash parameters   getUrlParams(location.hash.split('?')[1])

<a target="_blank" rel="noopener noreferrer">...</a>
// window.open defaults rel to 'opener', so set it explicitly   window.open('https://google.com', 'google', 'noopener,noreferrer')

<a target="_blank" rel="opener">...</a>window.opener.location = 'http://fake.website.here';

function readImage() {     const fileReader = new FileReader()     const file = document.getElementById('uploaded-file').files[0]
    if (file) {       fileReader.readAsDataURL(file)     }
     fileReader.addEventListener(       'load',       () => {         const result = fileReader.result         const resultContainer = document.getElementById('result')         const img = document.createElement('img')         img.src = result         resultContainer.append(img)       },       { once: true }     )   }

<a href="/path/to/file" download>Download</a>

function download(url) {     const link = document.createElement('a')     link.download = 'file name'     link.href = 'url'
     document.body.appendChild(link)     link.click()     document.body.removeChild(link)}

Content-Disposition: attachment; filename="filename.jpg"

const data = JSON.stringify({ 'message': 'Hello Word' });
const blob = new Blob([data], { type: 'application/json' }); // Create a URL for the blob const url = window.URL.createObjectURL(blob); // Download the URL using the 'download' function above ...
 // Release the URL object window.URL.revokeObjectURL(url);

const memoize = (fn) =>     (       (cache = Object.create(null)) =>       (arg) =>         cache[arg] || (cache[arg] = fn(arg))     )()

.truncate {     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;   }
.truncate-multi {     display: -webkit-box;     -webkit-box-orient: vertical;     -webkit-line-clamp: 2;      overflow: hidden;   }

// First three items   li:nth-child(-n + 3) {     text-decoration: underline;   }
// Items 2 through 5   li:nth-child(n + 2):nth-child(-n + 5) {     color: #2563eb;    }    // Last two items   li:nth-last-child(-n + 2) {     text-decoration: line-through;    }

::-webkit-scrollbar {   width: 8px;   height: 8px; }
::-webkit-scrollbar-track {   border-radius: 10px;   background-color: #fafafa; }
::-webkit-scrollbar-thumb {   border-radius: 10px;   background: rgb(191, 191, 191); }/* Modern scrollbar API */body {   scrollbar-width: thin;    scrollbar-color: #718096 #edf2f7; }

// Outputs:  ['32.56%', '6.97%', '27.91%', '32.56%']   getPercentWithPrecision([56, 12, 48, 56], 2)
function getPercentWithPrecision(valueList, precision) {    const digits = Math.pow(10, precision)    const sum = valueList.reduce((total, cur) => total + cur, 0)
    const votesPerQuota = valueList.map((val) => {        return val / sum * 100 * digits    })    const seats = votesPerQuota.map((val) => {      return Math.floor(val);    });    const remainder = votesPerQuota.map((val) => {      return val - Math.floor(val)    })
    let totalSeats = 100 * digits    let currentSeats = votesPerQuota.reduce((total, cur) => total + Math.floor(cur), 0)
    while(totalSeats - currentSeats > 0) {      let maxIdx = -1       let maxValue = Number.NEGATIVE_INFINITY       for(let i = 0; i < remainder.length; i++) {        if (maxValue < remainder[i]) {          maxValue = remainder[i]          maxIdx = i        }      }
      seats[maxIdx]++      remainder[maxIdx] = 0      currentSeats++    }
    return seats.map((val) => `${val / totalSeats * 100}%`)  }

async function asyncPool(poolLimit, iterable, iteratorFn) {    const ret = [];    const executing = new Set();    for (const item of iterable) {      const p = Promise.resolve().then(() => iteratorFn(item, iterable));      ret.push(p);      executing.add(p);      const clean = () => executing.delete(p);      p.then(clean).catch(clean);      if (executing.size >= poolLimit) {        await Promise.race(executing);      }    }    return Promise.all(ret);  }
// Example usage   const timeout = i => new Promise(resolve => setTimeout(() => resolve(i), i));  asyncPool(2, [1000, 5000, 3000, 2000], timeout).then(results => {    console.log(results)  })

const uuid = (a) =>    a      ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)      : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid)

// Disable body scrolling   document.body.style.overflow = 'hidden';
// Re-enable scrolling  document.body.style.removeProperty('overflow');