前端项目常用函数封装(二)

前端项目常用函数封装(一)

判断两个数组是否有相同元素 返回相同元素（数组）

//判断两个数组是否有相同元素
export const ishasSameElement = (arr1: string[], arr2: string[]) => {// 使用Set数据结构来存储数组的唯一元素let set1 = new Set(arr1);let set2 = new Set(arr2);// 使用Intersection方法找出两个集合的交集，如果交集不为空，那么就存在共享的元素let commonElements = new Set([...set1].filter((x) => set2.has(x)));return Array.from(commonElements);
};

如果上面看不懂话的就用for循环遍历吧

判断hex颜色值是深色还是浅色

注意这里一定要是128，不要写0.5，仔细看看下面的公式，就不会相信0.5了， 1*0.5=0.5了，哈哈哈

export const hexIsDark = (hex: string) => {// 将Hex颜色转换为RGB颜色let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);let rgb = result? {r: parseInt(result[1], 16),g: parseInt(result[2], 16),b: parseInt(result[3], 16),}: null;let brightness: number = 0;if (rgb) brightness = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;return brightness < 128;
};

随机生成深浅样色

const randomColor = () => {let deepColor = [];let lightColor = [];for (let i = 0; i < 100; i++) {let color = '#' + parseInt(Math.random() * 0xffffff).toString(16);if (hexIsDark(color)) {deepColor.push(color);} else {lightColor.push(color);}}console.log('deepColor', deepColor);console.log('lightColor', lightColor);};

js判断是手机端还是移动端

推荐使用UA去判断

使用UA判断

UA(UserAgent)是指HTTP请求头中的一部分，用于标识客户端的一些信息，比如用户的设备类型、浏览器型号等等。因此，我们可以通过判断UA中的关键字来确定页面访问者的设备类型。下面是实现的代码：

      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);if (isMobile) {console.log('当前在手机端');} else {console.log('当前在PC端');}//判断是否在微信浏览器var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf("micromessenger") != -1;if (isWeixin) { // 微信浏览器}else{ //普通浏览器if (isMobile) {console.log('当前在手机端');} else {console.log('当前在PC端');}}

使用媒体查询判断

获取当前浏览器的屏幕宽度

  if (window.innerWidth <= 1023) {console.log('当前在手机端');} else {console.log('当前在PC端');}

fetch直接读文件内容，解决乱码问题

 fetch(‘文件路径’).then(async (r) => {const text = await r.text();console.log(text);});

下载文件

将字符串下载保存为 txt fasta fa csv tsv等文本文件

/*** 下载txt fasta fa等文本文件* @param text 文本内容* @param fileName 文件名*/
export const saveTextAsFile = (text: any, filename: string) => {const blob = new Blob([text], { type: 'text/plain' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = filename;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);
};//或者  /*** 下载文件* @param url 文件路径* @param fileName 文件名称*/
import { saveAs } from 'file-saver';
//安装一下 file-saver包
export const downloadTxt = (url: string, fileName: string) => {const fileBlob = fetch(url).then((r) => r.blob())const blob = new Blob(['\uFEFF'+fileBlob ], { type: 'text/plain;charset=utf-8' });saveAs(blob, fileName);
};

下载文件

/*** 下载文件* @param content 文件内容* @param fileName 文件名称*/
export const download = (content: string, fileName: string) => {const link = document.createElement('a');link.href = encodeURI(content);link.download = fileName;document.body.appendChild(link);link.click();document.body.removeChild(link);
};

文件链接转文件流下载–主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题 还有excel下载

import { saveAs } from 'file-saver';/*** 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题 还有excel下载* @param url  ：文件链接* @param fileName  ：文件名;* @param type  ：文件类型;* @param fn  ：进度回调方法;*/export const saveFileToLink = (url: string, fileName: string) => {let xhr = new XMLHttpRequest();url = url.includes('https:') ? url.replace('https:', '') : url.replace('http:', ''); //资源路径动态获取请求的方式HTTPS或HTTPxhr.open('get', url, true);xhr.setRequestHeader('Content-Type', 'application/');xhr.setRequestHeader('If-Modified-Since', '0'); //解决缓存问题,每次请求都去请求服务器获取最新数据xhr.responseType = 'blob';xhr.onprogress = function (e) {//文件下载进度// if (fn && typeof fn == 'function') {//   fn(e); //监听文件下载进度;// }};xhr.onload = function () {if (this.status == 200) {//接受二进制文件流let blob = this.response;saveAs(blob, fileName);}};xhr.send();
};

移动端和pc端js判断手指的上滑，下滑，左滑，右滑，事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动

const scrollFunc = (e) => {e = e || window.event;let wheelDelta = e.wheelDelta ? e.wheelDelta : -e.detail * 50;if (wheelDelta > 0) {console.log(wheelDelta + '滑轮向上滚动');let dom = document.querySelector('.header-contanier');dom.style.display = 'flex';let dom2 = document.querySelector('.navNull');dom2.style.display = 'block';}if (wheelDelta < 0) {console.log(wheelDelta + '滑轮向下滚动');let dom = document.querySelector('.header-contanier');let dom2 = document.querySelector('.navNull');dom.style.display = 'none';dom2.style.display = 'none';}
};
if (document.addEventListener) {//火狐使用DOMMouseScroll绑定document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//其他浏览器直接绑定滚动事件
window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome// touchstart:     //手指放到屏幕上时触发
// touchmove:      //手指在屏幕上滑动式触发
// touchend:    //手指离开屏幕时触发
// touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用
let startX: number = 0;
let startY: number = 0;
document.addEventListener('touchstart',(e) => {e.preventDefault();// console.log(e);startX = e.changedTouches[0].pageX;startY = e.changedTouches[0].pageY;},false,
);
// document.addEventListener(
//   'touchend',
//   (e) => {
// e.preventDefault();
//     console.log(e);
//   },
//   false,
// );
document.addEventListener('touchmove',(e) => {// e.preventDefault();let moveEndX = e.changedTouches[0].pageX;let moveEndY = e.changedTouches[0].pageY;let X = moveEndX - startX;let Y = moveEndY - startY;if (Math.abs(X) > Math.abs(Y) && X > 0) {console.log('right');} else if (Math.abs(X) > Math.abs(Y) && X < 0) {console.log('left');} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {console.log('bottom');} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {console.log('top');} else {alert('just touch');}},false,
);

vue2、vue3全局挂载

vue3全局挂载
推荐使用（provide/inject），不推荐使用globalProperties：最新版本的已经弃用了

main.ts中

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { store } from './store';
import ant from 'ant-design-vue';import { ObjAscend, ObjDescend } from './utils/utils';const app = createApp(App);
//在这里挂载 这里挂载的是两个函数
app.provide('ObjAscend', ObjAscend);
app.provide('ObjDescend', ObjDescend);
//不推荐这种挂载方式了，最新版本已经弃用了
app.config.globalProperties.window = window;
app.use(router).use(store).use(ant).mount('#app');

组件中

import { defineComponent, inject } from 'vue';let ObjAscend:(parm:string)=>any = inject('ObjAscend')
let ObjDescend:any = inject('ObjDescend')

vue2全局挂载
main.ts中

import Vue from 'vue'
import App from './App'
import wLoading from "@/component/w-loading.vue";
import store from './store'
import {showToastOrNavTo,scanCode
} from '@/utils/util'
Vue.prototype.$store = store;
Vue.prototype.showToastOrNavTo = showToastOrNavTo;

页面中 ：直接this就好了

    mounted() {this.showToastOrNavTo()this.scanCode()}

js点击按钮复制文本方法

	//方法一：clickCopy(text) {const save = function (evn) {evn.clipboardData.setData("text/plain", text);evn.preventDefault(); // 阻止默认行为};document.addEventListener("copy", save); // 添加一个copy事件document.execCommand("copy"); // 执行copy方法this.$message({ message: "复制成功", type: "success" });}//方法二：clickCopy(code) {let oInput = document.createElement('input');oInput.value = code;document.body.appendChild(oInput);oInput.select(); // 选择对象;document.execCommand("Copy"); // 执行浏览器复制命令this.$message({ message: '复制成功', type: 'success' });oInput.remove()}