vue公用工具js方法怎么建

在Vue项目中，创建公用工具JS方法可以通过创建一个单独的工具文件来实现，这样可以确保代码的重用性、模块化、易维护性。具体步骤包括：创建工具文件、定义工具方法、在Vue组件中引入并使用。下面详细介绍如何在Vue项目中创建和使用公用工具JS方法。

一、创建工具文件

首先，在你的Vue项目的src目录下创建一个新的文件夹，例如utils，并在其中创建一个新的JS文件，例如common.js。这个文件将用于存放所有的公用工具方法。

// src/utils/common.js
// 示例工具方法：格式化日期
export function formatDate(date, format = 'YYYY-MM-DD') {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = ('0' + (d.getMonth() + 1)).slice(-2);
  const day = ('0' + d.getDate()).slice(-2);
  return format.replace('YYYY', year).replace('MM', month).replace('DD', day);
}
// 示例工具方法：深拷贝对象
export function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

二、定义工具方法

在工具文件中定义你需要的工具方法。工具方法可以包括各种常用的操作，例如日期格式化、深拷贝对象、数组去重等。以下是一些常用工具方法的示例：

1、格式化日期

格式化日期是一个常见需求，例如需要将日期对象转换为特定格式的字符串。

// 格式化日期
export function formatDate(date, format = 'YYYY-MM-DD') {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = ('0' + (d.getMonth() + 1)).slice(-2);
  const day = ('0' + d.getDate()).slice(-2);
  return format.replace('YYYY', year).replace('MM', month).replace('DD', day);
}

2、深拷贝对象

深拷贝对象是指创建一个对象的完全独立副本。

// 深拷贝对象
export function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

3、数组去重

数组去重可以帮助我们消除数组中的重复元素。

// 数组去重
export function uniqueArray(arr) {
  return [...new Set(arr)];
}

三、在Vue组件中引入并使用

在定义好工具方法后，可以在Vue组件中引入并使用这些方法。以下是一个示例：

<template>
  <div>
    <p>{{ formattedDate }}</p>
    <p>{{ copiedObject }}</p>
    <p>{{ uniqueArray }}</p>
  </div>
</template>
<script>
import { formatDate, deepClone, uniqueArray } from '@/utils/common';
export default {
  data() {
    return {
      date: new Date(),
      object: { a: 1, b: 2 },
      array: [1, 2, 2, 3, 4, 4]
    };
  },
  computed: {
    formattedDate() {
      return formatDate(this.date);
    },
    copiedObject() {
      return deepClone(this.object);
    },
    uniqueArray() {
      return uniqueArray(this.array);
    }
  }
};
</script>

四、扩展工具文件

随着项目的发展，可能会有更多的公用工具方法需要添加到工具文件中。为了保持文件的整洁和可维护性，可以将工具方法分门别类存放在不同的文件中。例如，可以根据功能将工具方法分为字符串处理、数组处理、对象处理等不同的文件。

// src/utils/dateUtils.js
export function formatDate(date, format = 'YYYY-MM-DD') {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = ('0' + (d.getMonth() + 1)).slice(-2);
  const day = ('0' + d.getDate()).slice(-2);
  return format.replace('YYYY', year).replace('MM', month).replace('DD', day);
}
// src/utils/objectUtils.js
export function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
// src/utils/arrayUtils.js
export function uniqueArray(arr) {
  return [...new Set(arr)];
}

然后，在需要的地方引入相应的工具文件即可：

import { formatDate } from '@/utils/dateUtils';
import { deepClone } from '@/utils/objectUtils';
import { uniqueArray } from '@/utils/arrayUtils';

五、常见的工具方法

1、字符串处理

字符串处理是开发中常见的需求，例如去除空格、转换大小写等。

// 去除字符串两端的空格
export function trim(str) {
  return str.trim();
}
// 将字符串转换为大写
export function toUpperCase(str) {
  return str.toUpperCase();
}

2、对象处理

对象处理包括深拷贝、浅拷贝、合并对象等。

// 浅拷贝对象
export function shallowClone(obj) {
  return { ...obj };
}
// 合并对象
export function mergeObjects(obj1, obj2) {
  return { ...obj1, ...obj2 };
}

3、数组处理

数组处理包括去重、排序、查找等。

// 数组排序
export function sortArray(arr) {
  return arr.sort((a, b) => a - b);
}
// 查找数组中的最大值
export function findMax(arr) {
  return Math.max(...arr);
}

六、工具方法的单元测试

为了确保工具方法的正确性和可靠性，可以为每个工具方法编写单元测试。使用Jest或Mocha等测试框架可以方便地进行单元测试。

// src/utils/__tests__/common.test.js
import { formatDate, deepClone, uniqueArray } from '@/utils/common';
test('formatDate formats date correctly', () => {
  const date = new Date('2023-01-01');
  expect(formatDate(date, 'YYYY-MM-DD')).toBe('2023-01-01');
});
test('deepClone clones object correctly', () => {
  const obj = { a: 1, b: 2 };
  const clonedObj = deepClone(obj);
  expect(clonedObj).toEqual(obj);
  expect(clonedObj).not.toBe(obj);
});
test('uniqueArray removes duplicates correctly', () => {
  const arr = [1, 2, 2, 3, 4, 4];
  expect(uniqueArray(arr)).toEqual([1, 2, 3, 4]);
});

七、使用项目管理系统提高效率

在项目开发过程中，使用项目管理系统可以提高团队的协作效率和项目的管理水平。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助团队进行任务管理、进度跟踪、资源分配等，使项目开发更加有序和高效。

1、PingCode

PingCode是一款专为研发团队设计的项目管理系统，支持敏捷开发、需求管理、缺陷跟踪等功能。它可以帮助研发团队更好地管理项目，提高开发效率和产品质量。

2、Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。它提供了任务管理、日程安排、文件共享等功能，帮助团队成员更好地协同工作，提高项目的执行力和透明度。

八、总结

通过创建公用工具JS方法，可以提高代码的重用性和可维护性。在Vue项目中，可以通过创建工具文件、定义工具方法、在组件中引入并使用等步骤来实现。此外，为了保证工具方法的正确性，可以编写单元测试进行验证。使用项目管理系统PingCode和Worktile可以进一步提高团队的协作效率和项目管理水平。