前端-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，表现对象为空。

1. export  function isEmptyObject(obj) {
2.     for (var key in obj) {
3.         if (obj.hasOwnProperty(key)) {
4.             return false;
5.         }
6.     }
7.     return true;
8. }

复制代码

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

1. //常规方法
2. export  function unique(arr) {
3.     let res = [];
4.     for(let i = 0; i < arr.length; i++) {
5.         if(res.indexOf(arr[i]) === -1) {
6.             res.push(arr[i]);
7.         }
8.     }
9.     return res;
10. }
14. // 或者使用ES6的新特性Set
15. export  function uniqueES6(arr) {
16.     return [...new Set(arr)];
17. }

复制代码

3.深拷贝

1. export function deepClone(obj) {
2.     if (typeof obj !== 'object' || obj === null) {
3.         return obj;
4.     }
5.     let cloneObj = Array.isArray(obj) ? [] : {};
6.     for(let key in obj) {
7.         if (obj.hasOwnProperty(key)) {
8.             cloneObj[key] = deepClone(obj[key]);
9.         }
10.     }
11.     return cloneObj;
12. }

复制代码

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

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

复制代码

to be contined..

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