今天給大家分享一些在前端開(kāi)發(fā)中，比較實(shí)用的代碼片段，希望大家能用得上！

1、檢測(cè)點(diǎn)擊元素外部

比如你想要點(diǎn)擊彈窗外部去關(guān)閉彈窗，或者 Vue 的自定義指令 clickoutside，都是利用了下面這個(gè)代碼片段。

圖片

2、一次性事件監(jiān)聽(tīng)

相信大家都用過(guò) addEventListener吧？你監(jiān)聽(tīng)后想要解除需要用到 removeEventListener，但是如果你只是想要一次性監(jiān)聽(tīng)的話，可以傳入第三個(gè)參數(shù)。

圖片

3、手動(dòng)解除事件監(jiān)聽(tīng)

還是 addEventListener，如果你不想使用 removeEventListener 去解除監(jiān)聽(tīng)的話，你也可以使用 AbortController + signal 去進(jìn)行手動(dòng)解除監(jiān)聽(tīng)。

圖片

4、控制并發(fā)數(shù)

現(xiàn)在前端中使用異步操作已經(jīng)是常態(tài)，更別說(shuō)異步請(qǐng)求了，而當(dāng)異步請(qǐng)求并發(fā)量比較高的時(shí)候，為了節(jié)約網(wǎng)絡(luò)資源提高用戶體驗(yàn)，我們需要控制并發(fā)數(shù)。

圖片

limitFn 的具體實(shí)現(xiàn)我放在下面了。

const limitFn = (limit) => {
  const queue = [];
  let activeCount = 0;

  const next = () => {
    activeCount--;

    if (queue.length > 0) {
      queue.shift()();
    }
  };

  const run = async (fn, resolve, ...args) => {
    activeCount++;

    const result = (async () => fn(...args))();


    try {
      const res = await result;
      resolve(res);
    } catch { }

    next();
  };

  const enqueue = (fn, resolve, ...args) => {
    queue.push(run.bind(null, fn, resolve, ...args));

    if (activeCount < limit && queue.length > 0) {
      queue.shift()();
    }
  };

  const generator = (fn, ...args) =>
    new Promise((resolve) => {
      enqueue(fn, resolve, ...args);
    });

  return generator;
};

5、生成唯一ID

也就是生成一個(gè)唯一的 uuid，其實(shí)現(xiàn)在很多庫(kù)都可以做，比如 lodash，當(dāng)然你也可以自己寫一個(gè)。

const uuid = (a) =>
  a
    ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)
    : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid)

6、格式化時(shí)分秒

如果你想要把時(shí)間格式化成 HH:mm:ss 這樣的話。

const formatSeconds = (s) =>
  [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)]
    .join(':')
    .replace(/\b(\d)\b/g, '0$1')

7、提取 URL 的參數(shù)

可以將 URL 上的參數(shù)提取出來(lái)，變成一個(gè)對(duì)象。

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 }),
    {}
  )

8、打開(kāi)彈窗時(shí)禁止頁(yè)面滾動(dòng)

當(dāng)我們打開(kāi)彈窗時(shí)，我們不希望整個(gè)頁(yè)面還能滾動(dòng)，那么可以在打開(kāi)彈窗時(shí)去設(shè)置頁(yè)面的滾動(dòng)樣式。

圖片