チェックしてみる価値のあるフロントエンド コード スニペット

毎日の開発では、一般的に使用されるコードフラグメントを蓄積します。これは、直接コピーしてさまざまなアイテムに貼り付けることができます。これは非常に便利です。他の人のプロジェクトを引き継いでいる場合、一部のプロジェクトで同じツールに気付くかもしれません。

フロントエンドコミュニティは成熟しており、Dayjsなどの優れたライブラリが配列と日付のニーズを満たすことはできません。

1. テスト要素外部クリック

ポップアップボックスを非表示にするか、ドロップダウンメニューを片付けた場合、レイヤー - レイヤー検査の代わりにcontainsメソッドを使用します。

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

2. 公式Webサイト

   をすばやく開きます

サードパーティライブラリのホームページまたはコードウェアハウスを表示するには、これらのNPMコマンドを使用できます。

ホームページを開きます<打>

npm home package_name

たとえば、

react

の場合

npmホームリアンス

コードウェアハウスを開きます

npm repo package_name

たとえば、

react

の場合

npmレポ反応

使い捨てのリスナー

3. イベント関数でモニターを削除することに加えて、1回のパラメーターを使用することもできます。

2番目をHH：MM：SS

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

に定式化します

4. ディスプレイオーディオ/ビデオの期間のシーンでは、この方法で秒数をフォーマットできます。

「Just」と同様の相対的な時間を表示するには、Timeago.jsライブラリを試すことができます。

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));

URLパラメーターをオブジェクト

に変換します

5. クエリストリングライブラリを使用する必要はありません。URLSearchParamsAPIを直接使用してください：

新しいタブページを開きます

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));

6. 外部リンクを開くときは、セキュリティのリスクを回避するために、rel = "noopener noreferrerrer"を設定します。

アップロードされた写真を表示

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

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

7. Filreader APIのReadasDataurlメソッドを使用して、アップロードされた画像を表示します。

ファイルダウンロード<<>

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

ラベルのダウンロードプロパティを使用するとトリガーできますが、いくつかの制限があります。
サーバー側に応答ヘッダーを設定するか、Blobを使用してブラウザでObjecturnを作成することもできます。

<a download="" href="https://www.php.cn/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);

9. マルチラインエリプシス

CSSを使用して、単一またはマルチラインに適したテキストを省略された番号にカットします。

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

10. 最後のいくつかの要素を選択

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;
}

11. ローリングストリップスタイル

CSSなどのサードパーティライブラリを使用して、ローリングバーをカスタマイズします。

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

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

13. パーセント計算 - 最大残余方法

最大剰余法を使用して、パーセンテージの合計が 1 になるようにします。

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

14. 同時実行を制限する

大量のリクエストを行う場合は、同時リクエストの数を制限します。

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));

15. UUID の生成

このコードを使用して一意の識別子を生成します。

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));

16. モーダルを開いて本文がスクロールしないようにします

モーダルを開いたときに本文がスクロールしないようにします。

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

元のリンク: https://www.php.cn/link/d9d838896ca0a5e16e7efa2439943fbd

以上がチェックしてみる価値のあるフロントエンド コード スニペットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。