ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端-vue工程化-utils文件夹的使用 [打印本页]

作者: 灌篮少年 时间: 2024-11-9 06:10
标题: 前端-vue工程化-utils文件夹的使用
照旧先上一张图：

我们在开辟vue项目中一样寻常都会有一个utils文件夹，它的作用就是用来统一管理项目中的工具函数。utils下存放全部的函数js文件，这样也是为了方便管理调用。
如果项目模块比较多，可以再utils文件夹下面新建多个.js文件以区分不同的业务大概功能。少的话就可以直接用一个index.js也可以，看现实项目必要。index.js文件内容如下：

将不同页面中经常用到的一些公用方法写在这里并且暴袒露来。
最后在必要使用的地方引用即可：
import { formatDuration } from '@/utils/index'
总结：utils文件夹的主要作用就是为了方便管理一些项目中大概频仍使用的js函数，这样我们必要做的就是在该使用某个方法的地方去引用utils文件夹下的方法，而不是在很多多少地方去再重复写一遍。我想这也是前端工程化的一个重要头脑，大概说是基本原则吧。
-------------------------------------------------------------------------
下面分享一些我们存放在utils下大概常用的一些方法：

1.判定一个对象是否为空：
这个用的比较多吧，项目中经常必要使用for in 去遍历对象然后用hasOwnProperty去判定这个对象有没有这个key,如果在循环中找到了一个键，则立即返回false，表现对象不为空。如果没有找到任何键，则在循环结束后返回true，表现对象为空。

export function isEmptyObject(obj) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
return false;
}
}
return true;
}

复制代码

2.数组去重：
这是一个很经典的问题，方法很多，这里的话就列举两个吧。最方便的照旧利用 new Set()和扩展运算法的组合使用。

//常规方法
export function unique(arr) {
let res = [];
for(let i = 0; i < arr.length; i++) {
if(res.indexOf(arr[i]) === -1) {
res.push(arr[i]);
}
}
return res;
}
// 或者使用ES6的新特性Set
export function uniqueES6(arr) {
return [...new Set(arr)];
}

复制代码

3.深拷贝

export function deepClone(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
let cloneObj = Array.isArray(obj) ? [] : {};
for(let key in obj) {
if (obj.hasOwnProperty(key)) {
cloneObj[key] = deepClone(obj[key]);
}
}
return cloneObj;
}

复制代码

4. 将（中国标定时间）转换成 yyyy-MM-dd HH:mm:ss格式

// 将（中国标准时间）转换成 yyyy-MM-dd HH:mm:ss格式样式为:2024-01-06 17:19:50
export function timestampToRegularTime (timestamp) {
const date = new Date(timestamp)
const Y = (`${date.getFullYear()}-`)
const M = `${date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1}-`
const D = `${date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()} `
const h = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}:`
const m = `${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}:`
const s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
return Y + M + D + h + m + s
}

复制代码

to be contined..

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)