跳至主要內容

通过使用惰性函数性能提升

Azil大约 1 分钟

惰性函数

惰性函数(Lazy Function)的核心思想是, 在第一次调用函数时才进行初始化(例如赋值、复杂的计算或资源分配等), 之后的调用则直接使用已经初始化的函数。 通过闭包和条件语句来实现。

函数内容

比如说我们有一个复制文本的函数

缺点:每次调用,内部都会进行一次判断

function copyText(text) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text);
  } else {
    const input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
  }
}

通过立即执行函数优化后

浏览器支不支持某种 API 在页面打开后就能确定,不需要每次都去判断。

所以我们改成:确定支持某种 API 后,就固定下来。

const copyText = (function() {
  if (navigator.clipboard) {
    return (text) => {
      navigator.clipboard.writeText(text);
    }
  } else {
    return (text) => {
      const input = document.createElement('input');
      input.setAttribute('value', text);
      document.body.appendChild(input);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
    }
  }
}());

通过AI优化后的代码

// 定义一个函数,用于处理旧浏览器的复制逻辑
function copyTextUsingExecCommand(text) {
  return new Promise((resolve, reject) => {
    const input = document.createElement('input');
    input.setAttribute('value', text);

    document.body.appendChild(input);
    input.select();

    document.execCommand('copy', (result) => {
      document.body.removeChild(input);
      if (result === true) {
        resolve('复制成功');
      } else {
        reject('复制失败');
      }
    });
  });
}

// 定义一个函数,用于处理现代浏览器的复制逻辑
async function copyTextUsingClipboardAPI(text) {
  try {
    await navigator.clipboard.writeText(text);
    return '复制成功';
  } catch (err) {
    return `复制失败: ${err}`;
  }
}

// 主函数,根据浏览器支持选择合适的复制方法
const copyText = (function() {
  if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
    // 使用现代浏览器的Clipboard API
    return copyTextUsingClipboardAPI;
  } else {
    // 使用旧方法
    return copyTextUsingExecCommand;
  }
})();

// 使用示例
copyText('Sample text to copy')
  .then((message) => console.log(message))
  .catch((error) => console.error(error));
上次编辑于:
贡献者: Azil