Extraits de code frontal qui vaut la peine d'être vérifié

Dans le développement quotidien, nous accumulerons des extraits de code couramment utilisés, qui peuvent être directement copiés et collés dans divers projets pour être utilisés, ce qui est très pratique. Si vous avez repris les projets d'autres personnes, vous remarquerez peut-être que les mêmes outils et méthodes existent dans certains projets. Il s'agit d'extraits de code courants accumulés par les développeurs précédents.

Maintenant que la communauté front-end a mûri, d'excellentes bibliothèques telles que lodash et dayjs peuvent répondre à nos besoins en matière de traitement des tableaux, des dates, etc. Cet article ne répétera pas ces fragments courants.

1. Détecter le clic à l'extérieur de l'élément

Lorsque vous masquez la boîte contextuelle ou réduisez le menu déroulant, utilisez la méthode contain au lieu de vérifier couche par couche.

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

2. Ouvrez rapidement le site officiel

Pour afficher la page d'accueil ou le référentiel de code d'une bibliothèque tierce, vous pouvez utiliser ces commandes npm :

Ouvrir la page d'accueil

npm home PACKAGE_NAME

Par exemple, pour React

npm home réagit

Ouvrez le référentiel de code

dépôt npm PACKAGE_NAME

Par exemple, pour React

npm repo réagir

3. Écouteur d'événement unique

En plus de supprimer l'écouteur dans la fonction événement, vous pouvez également utiliser le paramètre once.

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

4. Formater les secondes au format HH:mm:ss

Dans des scénarios tels que l'affichage de la durée audio/vidéo, vous pouvez formater les secondes comme ceci :

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

Pour afficher l'heure relative comme "tout à l'heure", vous pouvez essayer la bibliothèque timeago.js.

5. Convertir les paramètres d'URL en objets

Pas besoin d'utiliser la bibliothèque de chaînes de requête, utilisez directement l'API URLSearchParams :

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

6. Ouvrir un nouvel onglet

Lors de l'ouverture de liens externes, définissez rel="noopener noreferrer" pour éviter les risques de sécurité.

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

7. Afficher les images téléchargées

Utilisez la méthode readAsDataURL de l'API FileReader pour afficher l'image téléchargée.

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

8. Téléchargement de fichiers

L'utilisation de l'attribut download de la balise peut déclencher un téléchargement, mais elle présente certaines limites.

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

Vous pouvez également définir des en-têtes de réponse côté serveur ou côté navigateur en utilisant Blob et createObjectURL.

<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. Résultats mis en cache

Résultats de la fonction Cache pour les calculs complexes.

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

10. Points de suspension multilignes

Utilisez CSS pour tronquer le texte en ellipses, sur une ou plusieurs lignes.

<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. Sélectionnez les derniers éléments

Utilisez les sélecteurs CSS pour cibler des éléments spécifiques.

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

12. Style de barre de défilement

Personnalisez les styles de barre de défilement à l'aide de CSS ou de bibliothèques tierces comme better-scroll.

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

13. Pourcentage Calcul-maximum Méthode restante

La méthode restante maximale est utilisée pour garantir que le pourcentage total est égal à 1.

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

14. limiter simultanément

Lorsqu'un grand nombre de demandes, le nombre de demandes simultanées est limitée.

<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. Génération UUID

Utilisez ce code pour générer l'identifiant unique.

<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. Ouvrez la boîte modale et empêchez le roulement du corps

Bloquer le corps roulant lorsque la boîte modulaire est ouverte.

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

Lien original: https://www.php.cn/link/d9d838896ca5e16efa2439943fbd

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!