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

夜空孤狼啸

已于 2024-01-07 15:36:41 修改

阅读量1k

点赞数 25

分类专栏：前端技巧方法 JavaScript Vue 文章标签：前端 ubuntu linux

于 2023-12-20 15:45:05 首次发布

夜空孤狼啸

本文链接：https://blog.csdn.net/qq_43940789/article/details/135109852

版权

Vue 同时被 3 个专栏收录

39 篇文章 1 订阅

订阅专栏

JavaScript

34 篇文章 0 订阅

订阅专栏

前端技巧方法

28 篇文章 5 订阅

订阅专栏

文章目录

前端项目常用函数封装(一)
判断两个数组是否有相同元素返回相同元素（数组）
判断hex颜色值是深色还是浅色
- 随机生成深浅样色
js判断是手机端还是移动端
- 使用UA判断
- 使用媒体查询判断
fetch直接读文件内容，解决乱码问题
前端导出文件（下载文件）
移动端和pc端js判断手指的上滑，下滑，左滑，右滑，事件监听和判断鼠标滚轮向上滚动滑轮向下滚动
vue2、vue3全局挂载
js点击按钮复制文本方法

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

在这里插入图片描述

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

//判断两个数组是否有相同元素
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);
  
    });

前端导出文件（下载文件）

将表格导出xlsx文件

import xlsx from 'node-xlsx';
import { saveAs } from 'file-saver';
/**
 * 下载xlsx文件
 * @param data 表格数据 [{},{}]
 * @param name 文件名
 */

export const downloadXlsx = (data: any, fileName: string) => {
  let headerArr: string[] = [];
  let data2 = data.map((item: any, index: number) => {
    let arr2 = [];
    for (let key in item) {
      if (index == 0) headerArr.push(key);
      arr2.push(item[key]);
    }
    return arr2;
  });
  data2.unshift(headerArr);
  //如果你已经将需要下载数据处理成二维数据的话，上面的操作可以不要，上面我是为了把table中的data处理成二维数组
  let result = xlsx.build([{ name: 'sheet1', data: data2 }]);
  const ab = Buffer.from(result, 'binary');
  const blob = new Blob([ab]);
  //可以 file-saver 直接下载，也可以用下面注释掉的创建a链接去下载
  saveAs(blob, fileName);

  // const blobUrl = URL.createObjectURL(blob);
  // const a = document.createElement('a');
  // a.href = blobUrl;
  // a.download = fileName;
  // a.click();
  // window.URL.revokeObjectURL(blobUrl);
};

将表格导出 txt fasta fa csv tsv等文本文件

import Papa from 'papaparse';
import { saveAs } from 'file-saver';
/**
 * 下载csv文件
 * @param origin 列表数据对象 [{},{}]
 * @param fileName 文件名
 */

export const downloadCSV = (origin: any, fileName: string) => {
  const result = Papa.unparse(origin);
  const blob = new Blob(['\uFEFF' + result], { type: 'text/plain;charset=utf-8' });
  saveAs(blob, fileName);
};

将字符串下载保存为 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或HTTP
  xhr.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()
    }