1. ujian elemen luaran klik

// 代码示例 (此处省略)

2. Cepat buka laman web rasmi

npm rumah pakej_name

Sebagai contoh, untuk React

NPM Home React

Buka gudang kod

npm repo pakej_name

Sebagai contoh, untuk React

npm repo react

pendengar insiden pakai buang
Selain mengeluarkan monitor dalam fungsi acara, anda juga boleh menggunakan parameter sekali.

// 代码示例 (此处省略)

merumuskan yang kedua ke hh: mm: ss
Di tempat kejadian audio/video paparan, anda boleh memformat bilangan detik dengan cara ini:

const formatSeconds = (s) =>
  [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)].join(":").replace(/\b(\d)\b/g, "0");
const seconds = 3661;
console.log(formatSeconds(seconds));

Tukar parameter URL ke objek
tidak perlu menggunakan perpustakaan pertanyaan, menggunakan urlsearchParams API:

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 }),
    {}
  );
const query = "?a=1&b=2&a=3";
console.log(getUrlParams(query));

Buka halaman tab baru
Apabila membuka pautan luaran, tetapkan rel = "Noopener Noreferrerrer" untuk mengelakkan risiko keselamatan.

<a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a>

function openNewTab() {
  window.open("https://example.com", "newTab", "noopener,noreferrer");
}

tunjukkan gambar yang dimuat naik
Gunakan kaedah readasdataurl FileReader API untuk memaparkan gambar yang dimuat naik.

// 代码示例 (此处省略)

muat turun fail <<>

8. Menggunakan <签> muat turun harta label boleh dicetuskan, tetapi ia mempunyai beberapa sekatan.

Anda juga boleh menetapkan tajuk tindak balas di sisi pelayan, atau menggunakan gumpalan dan createObjecturn pada penyemak imbas.

<a download="" href="//m.sbmmt.com/link/8b89afaf8e00e0a46ea4d76ac473b1a2">下载</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);
}

const data = JSON.stringify({ message: "Hello" });
const blob = new Blob([data], { type: "application/json" });
const url = window.URL.createObjectURL(blob);
download(url);
window.URL.revokeObjectURL(url);

const memoize = (fn) =>
  (
    (cache = Object.create(null)) =>
    (arg) =>
      cache[arg] || (cache[arg] = fn(arg))
  )();
// 代码示例 (此处省略)

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

li:nth-child(-n + 3) {
  text-decoration: underline;
}
// 代码示例 (此处省略)

12. Gunakan perpustakaan pihak ketiga seperti CSS atau lebih baik untuk menyesuaikan bar rolling.

    // 代码示例 (此处省略)

    Salin selepas log masuk

    Salin selepas log masuk

    Salin selepas log masuk

    Salin selepas log masuk

    Salin selepas log masuk

    13. Pengiraan Peratusan-Kaedah Baki Maksimum

    Gunakan kaedah baki maksimum untuk memastikan peratusan berjumlah 1.

    // 代码示例 (此处省略)

    Salin selepas log masuk

    Salin selepas log masuk

    Salin selepas log masuk

    Salin selepas log masuk

    Salin selepas log masuk

    14. Hadkan konkurensi

    Hadkan bilangan permintaan serentak apabila membuat sejumlah besar permintaan.

    const formatSeconds = (s) =>
      [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)].join(":").replace(/\b(\d)\b/g, "0");
    const seconds = 3661;
    console.log(formatSeconds(seconds));

    Salin selepas log masuk

    Salin selepas log masuk

    15. Generasi UUID

    Gunakan kod ini untuk menjana pengecam unik.

    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 }),
        {}
      );
    const query = "?a=1&b=2&a=3";
    console.log(getUrlParams(query));

    Salin selepas log masuk

    Salin selepas log masuk

    16. Buka modal dan elakkan badan daripada menatal

    Halang menatal badan apabila membuka modal.

    <a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a>

    Salin selepas log masuk

    Salin selepas log masuk

    Pautan asal: //m.sbmmt.com/link/d9d838896ca0a5e16e7efa2439943fbd

    Atas ialah kandungan terperinci Coretan Kod Bahagian Hadapan Layak Disemak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!