八个超级实用的前端代码片段，总要用得上的！-51CTO.COM

今天给大家分享一些在前端开发中，比较实用的代码片段，希望大家能用得上！

1、检测点击元素外部

比如你想要点击弹窗外部去关闭弹窗，或者 Vue 的自定义指令 clickoutside，都是利用了下面这个代码片段。

图片

2、一次性事件监听

相信大家都用过 addEventListener吧？你监听后想要解除需要用到 removeEventListener，但是如果你只是想要一次性监听的话，可以传入第三个参数。

图片

3、手动解除事件监听

还是 addEventListener，如果你不想使用 removeEventListener 去解除监听的话，你也可以使用 AbortController + signal 去进行手动解除监听。

图片

4、控制并发数

现在前端中使用异步操作已经是常态，更别说异步请求了，而当异步请求并发量比较高的时候，为了节约网络资源提高用户体验，我们需要控制并发数。

图片

limitFn 的具体实现我放在下面了。

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;
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

5、生成唯一ID

也就是生成一个唯一的 uuid，其实现在很多库都可以做，比如 lodash，当然你也可以自己写一个。

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

6、格式化时分秒

如果你想要把时间格式化成 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')1.
2.
3.
4.

7、提取 URL 的参数

可以将 URL 上的参数提取出来，变成一个对象。

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 }),
    {}
  )1.
2.
3.
4.
5.
6.

8、打开弹窗时禁止页面滚动

当我们打开弹窗时，我们不希望整个页面还能滚动，那么可以在打开弹窗时去设置页面的滚动样式。

图片