js代码优化技巧

收集一些可以提升代码执行效率的技巧,不断更新中~

惰性函数

举个栗子 - 复制文本

js 复制代码
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时,其实只需要判断一次即可,没必要每次执行都判断一次是否支持该方法,因为浏览器环境是不会在使用过程中发生变化的。修改后如下:

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

修改为惰性函数后,在第一次调用copyText函数时就被修改了函数体,之后再调用就不会再判断是否支持,提升效率

参数归一化

举个栗子 - 日期格式化

写一个日期格式化方法format,可能需要如下多种传参

js 复制代码
function format() {}

// 2024-4-16
format(new Date(), 'date')
// 2024-4-16 10:5:46
format(new Date(), 'datetime')
// 2024-04-16
format(new Date(), 'date', true)
// 2024-04-16 10:05:46
format(new Date(), 'datetime', true)
// 2024年04月16日 10:05
format(new Date(), 'yyyy年MM月dd日 HH:mm', true)
// 2024年04月16日 10:05:46.565
format(new Date(), 'yyyy年MM月dd日 HH:mm:ss.ms', true)
// 今年
format(new Date(), (dateInfo) => {
  const { year } = dateInfo;
  const thisYear = new Date().getFullYear();
  if (year < thisYear) {
    return `${thisYear - year}年前`;
  } else if (year > thisYear) {
    return `${year - thisYear}年后`;
  } else {
    return '今年';
  }
})

我们可以对第二个参数进行归一化处理,找到最复杂的那个参数function,其它参数都向这个格式进行归一化,代码实现如下:

js 复制代码
function _formatNormalize(formatter) {
  if (typeof formatter === 'function') return formatter;
  if (typeof formatter !== 'string') throw new Error('formatter must be a string or a function');
  if (formatter === 'date') {
    formatter = 'yyyy-MM-dd';
  } else if (formatter === 'datetime') {
    formatter = 'yyyy-MM-dd HH:mm:ss';
  }
  return (dateInfo) => {
    const { yyyy, MM, dd, HH, mm, ss, ms } = dateInfo;
    return formatter
      .replace(/yyyy/g, yyyy)
      .replace(/MM/g, MM)
      .replace(/dd/g, dd)
      .replace(/HH/g, HH)
      .replace(/mm/g, mm)
      .replace(/ss/g, ss)
      .replace(/ms/g, ms);
  };
}

function format(date, formatter, isPad = false) {
  formatter = _formatNormalize(formatter);
  function _pad(value, length) {
    return isPad ? (value + '').padStart(length, '0') : value.toString();
  }
  const dateInfo = {
    year: date.getFullYear(),
    month: date.getMonth() + 1,
    day: date.getDate(),
    hours: date.getHours(),
    minutes: date.getMinutes(),
    seconds: date.getSeconds(),
    milliseconds: date.getMilliseconds(),
  };
  dateInfo.yyyy = _pad(dateInfo.year, 4);
  dateInfo.MM = _pad(dateInfo.month, 2);
  dateInfo.dd = _pad(dateInfo.day, 2);
  dateInfo.HH = _pad(dateInfo.hours, 2);
  dateInfo.mm = _pad(dateInfo.minutes, 2);
  dateInfo.ss = _pad(dateInfo.seconds, 2);
  dateInfo.ms = _pad(dateInfo.milliseconds, 3);
  return formatter(dateInfo);
}

// 可能调用的方式
console.log(format(new Date(), 'date'));
console.log(format(new Date(), 'datetime'));
console.log(format(new Date(), 'date', true));
console.log(format(new Date(), 'datetime', true));
console.log(format(new Date(), 'yyyy年MM月dd日 HH:mm', true));
console.log(format(new Date(), 'yyyy年MM月dd日 HH:mm:ss.ms', true));
console.log(
  format(new Date(), (dateInfo) => {
    const { year } = dateInfo;
    const thisYear = new Date().getFullYear();
    if (year < thisYear) {
      return `${thisYear - year}年前`;
    } else if (year > thisYear) {
      return `${year - thisYear}年后`;
    } else {
      return '今年';
    }
  })
);
相关推荐
洛卡卡了5 分钟前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫9 分钟前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman23 分钟前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥24 分钟前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥27 分钟前
Vue2 封装二维码弹窗组件
javascript·vue.js
凉柚ˇ27 分钟前
Vue图片压缩方案
前端·javascript·vue.js
慧一居士27 分钟前
vue 中 directive 作用,使用场景和使用示例
前端
慧一居士29 分钟前
vue 中 file-saver 功能介绍,使用场景,使用示例
前端
ByteCraze42 分钟前
秋招被问到的常见问题
开发语言·javascript·原型模式
渣哥1 小时前
从代理到切面:Spring AOP 的本质与应用场景解析
javascript·后端·面试