<a download="" href="http://www.miracleart.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);
}

你也可以在伺服器端設定回應頭，或是在瀏覽器端使用 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);

9. 快取結果

為複雜的計算快取函數(shù)結果。

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

12. 捲軸樣式

使用 CSS 或 better-scroll 等第三方函式庫自訂捲軸樣式。

// 代碼示例 (此處省略)

13. 百分比計算-最大餘數(shù)法

使用最大餘數(shù)法確保百分比總和等於 1。

// 代碼示例 (此處省略)

14. 限制並發(fā)

在進行大量請求時，限制並發(fā)請求數(shù)。

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. 打開模態(tài)框並阻止 body 滾動

打開模態(tài)框時阻止 body 滾動。

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