Vue 中封装高频工具函数，终身更新！

2023-12-23 02:39:36

1. 封装工具函数的优点

在 Vue 中封装工具函数有很多好处：

提高开发效率：通过封装常用的功能，可以减少重复代码，提高开发效率。
代码更简洁：封装后的工具函数可以使代码更简洁、更易读。
易于维护：工具函数可以集中管理，便于维护和更新。
提高代码复用性：封装后的工具函数可以在多个项目中复用，提高代码复用性。

2. 如何封装工具函数

在 Vue 中封装工具函数非常简单，只需要将以下代码添加到您的 Vue 项目中即可：

// 工具函数模块
const utils = {
  // 数据操作工具函数
  dataUtil: {
    // 深拷贝
    deepCopy(obj) {
      return JSON.parse(JSON.stringify(obj));
    },
    // 对象转数组
    objectToArray(obj) {
      return Object.keys(obj).map(key => obj[key]);
    },
  },
  // 字符串处理工具函数
  stringUtil: {
    // 首字母大写
    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    },
    // 去除字符串两端的空格
    trim(str) {
      return str.replace(/^\s+|\s+$/g, "");
    },
  },
  // 日期处理工具函数
  dateUtil: {
    // 格式化日期
    formatDate(date, format) {
      const o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      }
      for (let k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
          format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
      }
      return format;
    },
  },
};

// 全局注册工具函数
Vue.prototype.$utils = utils;