值得檢查的前端程式碼片段
Jan 26, 2025 am 10:06 AM
日常開發中，我們都會累積一些常用的程式碼片段，可以直接複製貼上到各種專案中使用，非常方便。如果你接手過別人的項目，可能會注意到一些專案中存在相同的工具方法，這些就是先前開發者累積的常用程式碼片段。
如今前端社群發展成熟，lodash、dayjs 等優秀函式庫能滿足我們處理陣列、日期等的需求，本文不會重複這些常見的片段。
-
偵測元素外部點擊
隱藏彈出框或收起下拉式功能表時，使用 contains 方法取代逐層檢查。
// 代码示例 (此处省略)
-
快速開啟官方網站
查看第三方函式庫的首頁或程式碼倉庫，可以使用這些 npm 指令：
開啟首頁
npm home PACKAGE_NAME
例如，對於 React
npm home react
開啟代碼倉庫
npm repo PACKAGE_NAME
例如，對於 React
npm repo react
-
一次性事件監聽器
除了在事件函數中移除監聽器，還可以使用 once 參數。
// 代码示例 (此处省略)
-
將秒格式化為 HH:mm:ss
在顯示音訊/視訊時長等場景下，可以這樣格式化秒數：
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));要顯示類似「剛剛」的相對時間，可以嘗試 timeago.js 函式庫。
-
將 URL 參數轉換為物件
無需使用 query-string 函式庫，直接使用 URLSearchParams API：
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));-
開啟新分頁
開啟外部連結時，設定 rel="noopener noreferrer" 以避免安全風險。
<a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a>
function openNewTab() {
window.open("https://example.com", "newTab", "noopener,noreferrer");
}-
顯示上傳的圖片
使用 FileReader API 的 readAsDataURL 方法顯示上傳的圖片。
// 代码示例 (此处省略)
-
檔案下載
使用 標籤的 download 屬性可以觸發下載，但它有一些限制。
<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);
}你也可以在伺服器端設定回應頭，或是在瀏覽器端使用 Blob 和 createObjectURL。
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))
)();
// 代码示例 (此处省略)-
多行省略號
使用 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;
}-
選最後幾個元素
使用 CSS 選擇器定位特定元素。
li:nth-child(-n + 3) {
text-decoration: underline;
}
// 代码示例 (此处省略)-
捲軸樣式
使用 CSS 或 better-scroll 等第三方函式庫自訂捲軸樣式。
// 代码示例 (此处省略)
-
百分比計算-最大餘數法
使用最大餘數法確保百分比總和等於 1。
// 代码示例 (此处省略)
-
限制並發
在進行大量請求時，限制並發請求數。
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));-
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));-
打開模態框並阻止 body 滾動
打開模態框時阻止 body 滾動。
<a href="https://example.com" rel="noopener noreferrer" target="_blank">打开</a>
原文鏈接：//m.sbmmt.com/link/d9d838896ca0a5e16e7efa2439943fbd
以上是值得檢查的前端程式碼片段的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱門文章
熱門文章
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
