Coretan Kod Bahagian Hadapan Layak Disemak

Dalam pembangunan harian, kami akan mengumpul beberapa serpihan kod yang biasa digunakan, yang boleh disalin secara langsung dan disisipkan ke dalam pelbagai item, yang sangat mudah. Jika anda telah mengambil alih projek orang lain, anda mungkin melihat alat yang sama dalam beberapa projek.

Sekarang komuniti depan sedang membangun, dan perpustakaan yang sangat baik seperti Lodash dan Dayjs dapat memenuhi keperluan array dan tarikh kami.

1. ujian elemen luaran klik

Apabila tersembunyi kotak pop -up atau letakkan menu drop -down, gunakan kaedah yang mengandungi bukannya Layer -by -layer pemeriksaan.

<code class="language-javascript">// 代码示例 (此处省略)</code>

2. Cepat buka laman web rasmi

Lihat laman utama atau gudang kod perpustakaan pihak ketiga, anda boleh menggunakan arahan NPM ini:

Buka Laman Utama

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.

<code class="language-javascript">// 代码示例 (此处省略)</code>

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

Untuk memaparkan masa relatif yang serupa dengan "Just", anda boleh mencuba perpustakaan Timeago.js.

<code class="language-javascript">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));</code>

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

<code class="language-javascript">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));</code>

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

<code class="language-html"><a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a></code>

<code class="language-javascript">function openNewTab() {
  window.open("https://example.com", "newTab", "noopener,noreferrer");
}</code>

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

<code class="language-javascript">// 代码示例 (此处省略)</code>

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.

<code class="language-html"><a download="" href="https://www.php.cn/link/8b89afaf8e00e0a46ea4d76ac473b1a2">下载</a></code>

<code class="language-javascript">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);
}</code>

hasil cache

<code class="language-javascript">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);</code>

9. adalah hasil fungsi cache pengiraan kompleks.

multi -line ellipsis

<code class="language-javascript">const memoize = (fn) =>
  (
    (cache = Object.create(null)) =>
    (arg) =>
      cache[arg] || (cache[arg] = fn(arg))
  )();
// 代码示例 (此处省略)</code>

10. Gunakan CSS untuk memotong teks ke dalam nombor yang ditinggalkan, sesuai untuk tunggal atau berbilang baris.

Pilih beberapa elemen terakhir

<code class="language-css">.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;
}</code>

11. Gunakan pemilih CSS untuk mencari elemen tertentu.

Gaya Strip Rolling

<code class="language-css">li:nth-child(-n + 3) {
  text-decoration: underline;
}
// 代码示例 (此处省略)</code>

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

    <code class="language-javascript">// 代码示例 (此处省略)</code>

    13. Pengiraan Peratusan-Kaedah Baki Maksimum

    Gunakan kaedah baki maksimum untuk memastikan peratusan berjumlah 1.

    <code class="language-javascript">// 代码示例 (此处省略)</code>

    14. Hadkan konkurensi

    Hadkan bilangan permintaan serentak apabila membuat sejumlah besar permintaan.

    <code class="language-javascript">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));</code>

    15. Generasi UUID

    Gunakan kod ini untuk menjana pengecam unik.

    <code class="language-javascript">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));</code>

    16. Buka modal dan elakkan badan daripada menatal

    Halang menatal badan apabila membuka modal.

    <code class="language-html"><a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a></code>

    Pautan asal: https://www.php.cn/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!