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.

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

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.

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

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

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

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

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:

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

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

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

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

7. Hochgeladene Bilder anzeigen

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

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

8. Datei-Download

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

<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;
}
// 代码示例 (此处省略)

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

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

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

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

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

Originallink: //m.sbmmt.com/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!