vue中自定义公共js怎么写

在Vue中自定义公共JS的写法

在Vue项目中自定义公共JS文件的核心步骤包括创建一个公共JS文件、在Vue组件中引入该文件、并在组件中使用它。以模块化、复用性、简洁性为核心原则，可以提高代码的可维护性和可读性。例如，可以将常用的函数封装在一个单独的JS文件中，然后在需要使用的Vue组件中引入和调用。

一、创建公共JS文件

在Vue项目的src目录下，新建一个名为utils的文件夹，用于存放公共的JS文件。在utils文件夹中创建一个名为common.js的文件，这个文件将包含所有的公共函数。例如：

// src/utils/common.js
export function formatDate(date) {
    const d = new Date(date);
    return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
}
export function calculateAge(birthDate) {
    const birth = new Date(birthDate);
    const today = new Date();
    let age = today.getFullYear() - birth.getFullYear();
    const m = today.getMonth() - birth.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
        age--;
    }
    return age;
}

二、在Vue组件中引入公共JS文件

在需要使用公共函数的Vue组件中，通过import语句将公共JS文件引入。例如，在一个名为UserProfile.vue的组件中引入并使用这些函数：

<template>
    <div>
        <p>User's birthdate: {{ userBirthdate }}</p>
        <p>User's age: {{ userAge }}</p>
    </div>
</template>
<script>
import { formatDate, calculateAge } from '@/utils/common';
export default {
    data() {
        return {
            userBirthdate: '1990-05-15'
        };
    },
    computed: {
        userAge() {
            return calculateAge(this.userBirthdate);
        }
    },
    created() {
        console.log(`Formatted birthdate: ${formatDate(this.userBirthdate)}`);
    }
};
</script>

三、模块化设计与最佳实践

1、模块化设计

将公共函数分模块管理，有助于提高代码的可维护性和可读性。例如，可以按照功能将函数划分到不同的文件中：

dateUtils.js：处理日期相关的函数。
stringUtils.js：处理字符串相关的函数。
mathUtils.js：处理数学运算相关的函数。

2、使用ES6+特性

利用ES6+的特性，如箭头函数、解构赋值、模板字符串等，可以使代码更简洁、更现代。例如：

// src/utils/dateUtils.js
export const formatDate = (date) => {
    const d = new Date(date);
    return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
};
export const calculateAge = (birthDate) => {
    const birth = new Date(birthDate);
    const today = new Date();
    let age = today.getFullYear() - birth.getFullYear();
    const m = today.getMonth() - birth.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
        age--;
    }
    return age;
};

3、代码复用与优化

避免重复代码：将常用的逻辑抽离到公共函数中，避免在多个组件中重复编写相同的代码。
提高代码复用性：通过编写通用的、参数化的函数，提高代码的复用性。例如：

// src/utils/mathUtils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

四、在Vue项目中的实际应用场景

1、表单验证

在表单验证中，常常需要编写一些通用的验证函数。例如，验证邮箱格式、手机号格式等，可以将这些验证函数封装在公共JS文件中：

// src/utils/validationUtils.js
export const isValidEmail = (email) => {
    const re = /^[^s@]+@[^s@]+.[^s@]+$/;
    return re.test(email);
};
export const isValidPhoneNumber = (phoneNumber) => {
    const re = /^[0-9]{10,11}$/;
    return re.test(phoneNumber);
};

在组件中使用这些验证函数：

<template>
    <form @submit.prevent="submitForm">
        <input v-model="email" type="email" placeholder="Enter your email">
        <input v-model="phoneNumber" type="tel" placeholder="Enter your phone number">
        <button type="submit">Submit</button>
    </form>
</template>
<script>
import { isValidEmail, isValidPhoneNumber } from '@/utils/validationUtils';
export default {
    data() {
        return {
            email: '',
            phoneNumber: ''
        };
    },
    methods: {
        submitForm() {
            if (!isValidEmail(this.email)) {
                alert('Invalid email format');
                return;
            }
            if (!isValidPhoneNumber(this.phoneNumber)) {
                alert('Invalid phone number format');
                return;
            }
            // Submit form
        }
    }
};
</script>

2、API请求

在Vue项目中，常常需要与后端进行数据交互，可以将API请求逻辑封装在公共JS文件中。例如，使用axios进行API请求：

// src/utils/api.js
import axios from 'axios';
const API_BASE_URL = 'https://api.example.com';
export const getUserData = (userId) => {
    return axios.get(`${API_BASE_URL}/users/${userId}`);
};
export const updateUserData = (userId, data) => {
    return axios.put(`${API_BASE_URL}/users/${userId}`, data);
};

在组件中使用这些API请求函数：

<template>
    <div>
        <p>User's name: {{ userData.name }}</p>
        <p>User's email: {{ userData.email }}</p>
    </div>
</template>
<script>
import { getUserData, updateUserData } from '@/utils/api';
export default {
    data() {
        return {
            userData: {}
        };
    },
    async created() {
        try {
            const response = await getUserData(1);
            this.userData = response.data;
        } catch (error) {
            console.error('Failed to fetch user data', error);
        }
    },
    methods: {
        async updateUserInfo() {
            try {
                const updatedData = { name: 'New Name', email: 'new@example.com' };
                await updateUserData(1, updatedData);
                this.userData = updatedData;
            } catch (error) {
                console.error('Failed to update user data', error);
            }
        }
    }
};
</script>

五、使用项目管理系统进行管理

在实际的开发过程中，管理代码和协作是非常重要的。使用研发项目管理系统PingCode和通用项目协作软件Worktile可以帮助团队更高效地进行项目管理和协作。

1、研发项目管理系统PingCode

PingCode是一款专门为研发团队设计的项目管理系统，支持需求管理、任务分配、代码管理、测试管理等功能。使用PingCode可以帮助团队更好地管理项目进度、分配任务、跟踪问题，提高研发效率。

2、通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，支持任务管理、项目管理、团队协作、文件共享等功能。使用Worktile可以帮助团队更高效地进行协作和沟通，提高工作效率。

六、总结

在Vue项目中，自定义公共JS文件是提高代码复用性、可维护性和可读性的有效方法。通过模块化设计、使用ES6+特性、优化代码复用，可以使代码更加简洁、现代。在实际应用中，公共JS文件可以用于表单验证、API请求等场景。使用PingCode和Worktile等项目管理系统，可以帮助团队更高效地进行项目管理和协作。