js技巧

js 技巧

有关虚拟滚动

• 前端虚拟列表的实现原理：
  • 「前端进阶」高性能渲染十万条数据(虚拟列表)——这里讲得很清楚：https://cloud.tencent.com/developer/article/1533206
  • https://mp.weixin.qq.com/s/rfDytEJHSlhj_9OTMAdTjw
  • 虚拟滚动的三种实现思路：https://blog.51cto.com/youthfighter/5461161
  • SolidJs 里也有虚拟滚动

阻止元素滚动

• function disableScroll() {
    // Get the current page scroll position
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    (scrollLeft = window.pageXOffset || document.documentElement.scrollLeft),
      // if any scroll is attempted,
      // set this to the previous value
      (window.onscroll = function () {
        window.scrollTo(scrollLeft, scrollTop);
      });
  }
  
  function enableScroll() {
    window.onscroll = function () {};
  }
  

解决 h5 滚动穿透

• https://gitee.com/wangluoshihuang/cssReset/blob/master/fuckScrollChaining.js

• export function scrollChaining($mask, $modal) {
    const listenerOpts = {
      passive: false,
    };
    if ($mask) {
      $mask.addEventListener(
        "touchmove",
        (e) => {
          e.preventDefault();
        },
        listenerOpts
      );
    }
    // 上面（$mask.）阻止已经满屏元素滚动；下面（$modal）阻止已经滚动到底的元素滚动穿透
    if ($modal) {
      let modalHeight = 0;
      let modalScrollHeight = 0;
      let startY = 0;
  
      $modal.addEventListener("touchstart", (e) => {
        startY = e.touches[0].pageY;
        modalHeight = $modal.clientHeight;
        modalScrollHeight = $modal.scrollHeight;
      });
      $modal.addEventListener(
        "touchmove",
        (e) => {
          e.stopPropagation();
          let endY = e.touches[0].pageY;
          let delta = endY - startY;
          if (($modal.scrollTop === 0 && delta > 0) || ($modal.scrollTop + modalHeight === modalScrollHeight && delta < 0)) {
            e.preventDefault();
          }
        },
        listenerOpts
      );
    }
  }
  

获取本地视频信息

• export async function getVideoInfoByFile(fileList: File[] | FileList) {
    const promises: Promise<any>[] = [];
    const files = Array.from(fileList);
    for (const item of files) {
      promises.push(
        new Promise((resolve, reject) => {
          let url = "";
          try {
            url = (window.URL || window.webkitURL || window.mozURL).createObjectURL(item);
            const video = document.createElement("video");
            video.addEventListener("loadedmetadata", function () {
              (window.URL || window.webkitURL || window.mozURL).revokeObjectURL(url);
              resolve({
                width: this.videoWidth,
                height: this.videoHeight,
                duration: this.duration,
                size: item.size,
                type: item.type,
                name: item.name,
              });
            });
            video.addEventListener("error", function () {
              if (url) {
                (window.URL || window.webkitURL || window.mozURL).revokeObjectURL(url);
              }
              reject();
            });
            video.src = url;
          } catch (error) {
            if (url) {
              (window.URL || window.webkitURL || window.mozURL).revokeObjectURL(url);
            }
            reject(error);
          }
        })
      );
    }
    const result = await Promise.allSettled(promises);
    return result.map((item) => {
      if (item.status === "fulfilled") {
        return item.value;
      }
      return null;
    });
  }
  

  • 也可以使用 FileReader API 获取视频信息：https://www.cnblogs.com/xinjie-just/p/17955002,但是更推荐上面那种方法。因为：https://juejin.cn/post/6971307596191891493