Front-End-Codeausschnitte, die einen Blick wert sind

In der täglichen Entwicklung sammeln wir einige häufig verwendete Codefragmente, die zur Verwendung direkt kopiert und in verschiedene Projekte eingefügt werden können, was sehr praktisch ist. Wenn Sie die Projekte anderer Leute übernommen haben, stellen Sie möglicherweise fest, dass in einigen Projekten dieselben Tools und Methoden vorhanden sind. Dabei handelt es sich um allgemeine Codeausschnitte, die von früheren Entwicklern gesammelt wurden.

Da die Front-End-Community nun ausgereift ist, können hervorragende Bibliotheken wie lodash und dayjs unsere Anforderungen an die Verarbeitung von Arrays, Daten usw. erfüllen. In diesem Artikel werden diese häufigen Fragmente nicht wiederholt.

1. Klick außerhalb des Elements erkennen

Wenn Sie das Popup-Fenster ausblenden oder das Dropdown-Menü ausblenden, verwenden Sie die Methode „enthält“, anstatt Ebene für Ebene zu prüfen.

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

2. Öffnen Sie schnell die offizielle Website

Um die Homepage oder das Code-Repository einer Drittanbieterbibliothek anzuzeigen, können Sie diese npm-Befehle verwenden:

Homepage öffnen

npm home PACKAGE_NAME

Zum Beispiel für React

NPM Home React

Öffnen Sie das Code-Repository

npm repo PACKAGE_NAME

Zum Beispiel für React

NPM-Repo-Reaktion

3. Einmaliger Ereignis-Listener

Zusätzlich zum Entfernen des Listeners in der Ereignisfunktion können Sie auch den Once-Parameter verwenden.

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

4. Formatieren Sie die Sekunden als HH:mm:ss

In Szenarien wie der Anzeige der Audio-/Videodauer können Sie Sekunden wie folgt formatieren:

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

Um die relative Zeit wie „gerade jetzt“ anzuzeigen, können Sie die Bibliothek timeago.js ausprobieren.

5. URL-Parameter in Objekte konvertieren

Es ist nicht erforderlich, eine Abfragezeichenfolgenbibliothek zu verwenden. Verwenden Sie die URLSearchParams-API direkt:

<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. Neuen Tab öffnen

Wenn Sie externe Links öffnen, setzen Sie rel="noopener noreferrer", um Sicherheitsrisiken zu vermeiden.

<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. Hochgeladene Bilder anzeigen

Verwenden Sie die readAsDataURL-Methode der FileReader-API, um das hochgeladene Bild anzuzeigen.

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

8. Datei-Download

Die Verwendung des Download-Attributs des -Tags kann einen Download auslösen, weist jedoch einige Einschränkungen auf.

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

Sie können Antwortheader auch auf der Serverseite oder auf der Browserseite mithilfe von Blob und createObjectURL festlegen.

<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. Gespeicherte Ergebnisse

Cache-Funktionsergebnisse für komplexe Berechnungen.

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

10. Mehrzeilige Auslassungspunkte

Verwenden Sie CSS, um Text in einzelnen oder mehreren Zeilen auf Ellipsen zu kürzen.

<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. Wählen Sie die letzten paar Elemente aus

Verwenden Sie CSS-Selektoren, um auf bestimmte Elemente abzuzielen.

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

12. Bildlaufleistenstil

Passen Sie die Stile der Bildlaufleiste mithilfe von CSS oder Bibliotheken von Drittanbietern wie better-scroll an.

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

13. Prozentsatzberechnung – Methode des maximalen Restbetrags

Verwenden Sie die Methode des maximalen Rests, um sicherzustellen, dass sich die Prozentsätze auf 1 summieren.

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

14. Parallelität begrenzen

Begrenzen Sie die Anzahl gleichzeitiger Anfragen, wenn Sie eine große Anzahl von Anfragen stellen.

<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. UUID-Generierung

Verwenden Sie diesen Code, um eine eindeutige Kennung zu generieren.

<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. Modal öffnen und Text am Scrollen hindern

Verhindern Sie das Scrollen des Textkörpers beim Öffnen des Modals.

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

Originallink: https://www.php.cn/link/d9d838896ca0a5e16e7efa2439943fbd

Das obige ist der detaillierte Inhalt vonFront-End-Codeausschnitte, die einen Blick wert sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!