前端开发部-工作文档

Appearance

util工具类 ​

util工具类路径'src/assets/js/util';

trim（字符串去空格） ​

javascript
import util from '@/assets/js/util';

let txt = ' 北京博思 财信网络科技有限公司 ';
console.log(util.trim(txt));
// 输出 '北京博思财信网络科技有限公司'

reverseString（字符串反转） ​

javascript
import util from '@/assets/js/util';

let txt = '北京博思财信';
console.log(util.reverseString(txt));
// 输出 '信财思博京北'

findManyIndex (获取一个字符在字符串中第几次出现的索引（num从0开始，第一次传0）) ​

javascript
import util from '@/assets/js/util';

// 原数组
let array = ['a', 'b', 'c', 'a', 'd', 'b', 'e'];
// 查找的值
let value = 'b';
// 第几次出现
let num = 0;
console.log(util.findManyIndex(array, value, num));
// 输出 1

toNumber（转换成数字类型） ​

javascript
import util from '@/assets/js/util';

let value = '10';
console.log(util.toNumber(value));
// 输出 10

getHashCode（获取HashCode） ​

javascript
import util from '@/assets/js/util';

let value = {name: '北京博思财信网络科技有限公司'};
console.log(util.getHashCode(JSON.stringify(value)));

isEmpty（判断是否为空） ​

javascript
import util from '@/assets/js/util';

//判断是否是空字符串
let value1 = '';
console.log(util.isEmpty(value1));
// 输出 true

//判断是否是null
let value2 = null;
console.log(util.isEmpty(value2));
// 输出 true

//判断是否是undefined
let value3 = undefined;
console.log(util.isEmpty(value3));
// 输出 true

// 判断是否是NaN
let value4 = NaN;
console.log(util.isEmpty(value4));
// 输出 true

// 判断是否是空数组
let value5 = [];
console.log(util.isEmpty(value5));
// 输出 true

isNotEmpty（判断是否不为空） ​

javascript
import util from '@/assets/js/util';

//判断是否不是空字符串
let value1 = '';
console.log(util.isNotEmpty(value1));
// 输出 false

//判断是否不是null
let value2 = null;
console.log(util.isNotEmpty(value2));
// 输出 false

//判断是否不是undefined
let value3 = undefined;
console.log(util.isNotEmpty(value3));
// 输出 false

// 判断是否不是NaN
let value4 = NaN;
console.log(util.isNotEmpty(value4));
// 输出 false

// 判断是否不是空数组
let value5 = [];
console.log(util.isNotEmpty(value5));
// 输出 false

isEmptyObject（判断是否是空对象） ​

javascript
import util from '@/assets/js/util';

let value = {};
console.log(util.isEmptyObject(value));
// 输出 true

isNotEmptyObject（判断是否不是空对象） ​

javascript
import util from '@/assets/js/util';

let value = {
  a: 1,
  b: 2
};
console.log(util.isNotEmptyObject(value));
// 输出 true

everyEmpty（判断是否全部为空） ​

javascript
import util from '@/assets/js/util';

let value = ['', null, undefined, []];
console.log(util.everyEmpty(value));
// 输出 true

everyNotEmpty（判断是否全部不为空） ​

javascript
import util from '@/assets/js/util';

let value = ['', null, undefined, []];
console.log(util.everyNotEmpty(value));
// 输出 false

someEmpty（判断是否有一个为空） ​

javascript
import util from '@/assets/js/util';

let value = [[1,2,3], null, {a:1}, {b:2}];
console.log(util.someEmpty(value));
// 输出 true

someNotEmpty（判断是否有一个不为空） ​

javascript
import util from '@/assets/js/util';

let value = ['', null, undefined, [], [1,2,3]];
console.log(util.someNotEmpty(value));
// 输出 true

includeAll（判断一个集合（数组）是否包含另一个集合（数组）的所有元素） ​

javascript
import util from '@/assets/js/util';

let allArray = [1,2,3,4,5];
let subArray = [2,3,4];
console.log(util.includeAll(allArray, subArray));
// 输出 true

floatEqual（浮点数比较） ​

  • 涉及到浮点数的比较是否相等，必须使用此方法
javascript
import util from '@/assets/js/util';

let value = 0.1 + 0.2;
let other = 0.3;
console.log(util.floatEqual(value, other));
// 输出 true

copyProperties（复制属性方法） ​

javascript
import util from '@/assets/js/util';

let target = {a: 1, b: 2, c: 3};
let source = {a: 2, b: 3, c: 4, d: 5, e: 6};
util.copyProperties(target, source)
console.log(target);
// 输出 {a: 2, b: 3, c: 4};

freezeDeep（深度冻结对象） ​

  • 使用场景：数据量大结构复杂的只读对象，一般为解决页面性能问题，在请求完数据之后，赋值给页面状态数据之前，可以进行冻结。
javascript
import util from '@/assets/js/util';

let target = {a: 1, b: 2, c: 3: d: {a: 2, b: 3, c: 4, d: 5, e: 6}};
util.freezeDeep(target, source)

scrollTop（设置垂直滚动高度） ​

vue
<template>
  <!-- 滚动区域 -->
  <div ref="main"></div>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 使目标区域滚动至垂直滚动高度300
     */
    scroll() {
      let el = this.$refs.main;
      util.scrollTop(el, el.scrollTop, 300);
    }
  },
  mounted() {
    this.scroll();
  },
};
</script>

addEvent（添加事件绑定） ​

vue
<template>
  <!-- 滚动区域 -->
  <div ref="main"></div>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 处理滚动区域滚动
     */
    onScroll(event) {
    	console.log('onScroll', event);
    }
  },
  mounted() {
    // 添加事件绑定
    let el = this.$refs.main;
    util.addEvent(el, 'scroll', this.onScroll);
  },
};
</script>

removeEvent（移除事件绑定） ​

vue
<template>
  <!-- 滚动区域 -->
  <div ref="main"></div>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 处理滚动区域滚动
     */
    onScroll(event) {
    	console.log('onScroll', event);
    }
  },
  beforeDestroy() {
    // 删除事件绑定
    let el = this.$refs.main;
    util.removeEvent(el, 'scroll', this.onScroll);
  },
};
</script>

getEventPath（获取事件冒泡路径，兼容ie11,edge,chrome,firefox,safari） ​

vue
<template>
  <!-- 获取事件冒泡路径 -->
  <button @click="onClick">获取事件冒泡路径</button>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 处理点击
     * 1、获取事件冒泡路径
     */
    onClick(event) {
      let eventPath = util.getEventPath(event);
    	console.log('eventPath', eventPath);
    }
  },
};
</script>

getEvent（获取event事件对象） ​

vue
<template>
  <!-- 获取事件对象 -->
  <button @click="onClick">获取事件对象</button>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 处理点击
     * 1、获取事件对象
     */
    onClick(event) {
      event = util.getEvent(event);
    	console.log('event', event);
    }
  },
};
</script>

getTarget（获取事件来源） ​

vue
<template>
  <!-- 获取事件来源 -->
  <button @click="onClick">获取事件来源</button>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 处理点击
     * 1、获取事件来源
     */
    onClick(event) {
      let eventTarget = util.getTarget(event);
    	console.log('eventTarget', eventTarget);
    }
  },
};
</script>

preventDefault（阻止默认行为） ​

vue
<template>
  <!-- 阻止默认行为 -->
  <button @click="onClick">阻止默认行为</button>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 处理点击
     * 1、阻止默认行为
     */
    onClick(event) {
      util.preventDefault(event);
    }
  },
};
</script>

stopPropagation（阻止事件传播） ​

vue
<template>
  <!-- 阻止事件传播 -->
  <button @click="onClick">阻止事件传播</button>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 处理点击
     * 1、阻止事件传播
     */
    onClick(event) {
      util.stopPropagation(event);
    }
  },
};
</script>

download（下载文件） ​

vue
<template>
  <!-- 下载文件 -->
  <button @click="onClick">下载文件</button>
</template>
<script>
import util from '@/assets/js/util';

export default {
  methods: {
    /**
     * 处理点击
     * 1、下载文件
     */
    onClick(event) {
      let url = 'http://xxxxxxx/xxx.pdf'
      util.download(url);
    }
  },
};
</script>

getBrowser（获取浏览器信息） ​

javascript
import util from '@/assets/js/util';

console.log(util.getBrowser());
// 输出 {"navigator":{},"appVersion":"5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36","userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36","language":"zh-cn","versions":{"trident":false,"presto":false,"webKit":true,"gecko":false,"ie":false,"edge":false,"opera":false,"firefox":false,"safari":false,"chrome":true,"win":false,"mac":true,"mobile":false,"ios":false,"android":false,"iPhone":false,"iPad":false,"webApp":false,"weChat":false,"alipay":false,"weibo":false,"dingTalk":false,"govDingTalk":false,"qq":false,"operatingSystem":"mac"}}

getDateInfo（获取日期时间信息） ​

javascript
import util from '@/assets/js/util';

console.log(util.getDateInfo());
// 输出 {"date":"2023-08-29T11:41:57.075Z","year":2023,"month":8,"week":2,"day":29,"hours":19,"minutes":41,"seconds":57,"dateInfo":"2023-08-29","timeInfo":"19:41:57","dateTimeInfo":"2023-08-29 19:41:57","time":1693309317075}

getBasePath（获取应用URL路径） ​

javascript
import util from '@/assets/js/util';

console.log(util.getBasePath());
// 输出 http://localhost:3000

getContextPath（获取应用上下文路径） ​

javascript
import util from '@/assets/js/util';

console.log(util.getContextPath());
// 例如：http://localhost:3000/orange/#/index 输出 '/orange/'

getFileType（获取文件类型） ​

javascript
import util from '@/assets/js/util';

let pdfFile = 'file1.pdf';
console.log(util.getFileType(pdfFile));
// 输出 'PDF'

generateShortId（生成短Id） ​

javascript
import util from '@/assets/js/util';

console.log(util.generateShortId());
// 输出 2658006009

console.log(util.generateShortId(true));
// 输出 '2658006009'

generateUUID（生成UUID） ​

javascript
import util from '@/assets/js/util';

console.log(util.generateUUID());
// 输出 '906ea5d805954908878bf0507849145c'

generateGUID（生成GUID） ​

javascript
import util from '@/assets/js/util';

console.log(util.generateGUID());
// 输出 '1h90igekknfntjp11cn1g3euu60'

generateText（生成错误文本） ​

javascript
import util from '@/assets/js/util';

console.log(util.generateText('error.txt', '此处是错误信息'));

isJsonString（是否为Json字符串） ​

javascript
import util from '@/assets/js/util';

console.log(util.isJsonString('{"a":1,"b":2,"c":3,"d":4,"e":5}'));
// 输出 true

parseParams（拼接参数） ​

javascript
import util from '@/assets/js/util';

let url = 'http://192.168.2.123:3000';
let params = {
  a: 1,
  b: 2,
};
console.log(util.parseParams(url, params));
// 输出 'http://192.168.2.123:3000?a=1&b=2';

getUrlParams（获取url参数） ​

javascript
import util from '@/assets/js/util';

let url = 'http://192.168.2.123:3000?a=1&b=2';
console.log(util.getUrlParams(url));
// 输出 '{a: '1', b: '2'}';