前端项目中常用JS方法封装分享

写在前面

我在写项目时，会把经常用到的方法专门用一个JS文件来管理，下面是我项目中经常用的一些方法
1、日期格式化（时间戳转年月日时分秒）；
2、千分位格式化（10000转10,000）；
3、Element UI前端el-table前端导出；
4、两个数组对象去重；
5、后端返回数据流前端下载方法；
6、富文本标签过滤（去除HTML标签）

一、日期格式化

在实际项目中，后端返回时间基本都是以时间戳的格式，我们前端拿到肯定是要转换成相应的年月日时分秒格式的，以下是方法：

1、对Date的扩展：新建js文件，并全局引入

Date.prototype.Format = function (fmt) { // author: meizz
  const DateObjs = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'h+': this.getHours(), // 小时
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    S: this.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  for (var key in DateObjs) {
    if (new RegExp('(' + key + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (DateObjs[key]) : (('00' + DateObjs[key]).substr(('' + DateObjs[key]).length)))
  }
  return fmt
}

2、封装常用时间方法：将时间戳转换成指定格式时间

export const dateFilter = (time, format = 'yyyy-MM-dd hh:mm:ss') => {
  return time ? new Date(time).Format(format) : ''
}
// 使用方法
dateFilter(时间戳, 'yyyy年MM月dd日 hh:mm:ss')

二、千分位格式化

即：1000000 => 1,000,000，这个比较简单，以下是方法：

// 千分位数字
export const numberFormat = (number) => number.toLocaleString()
// 使用方法
numberFormat(1000000)

三、Element UI前端el-table前端导出

前端导出速度更快，体验更好

1、安装三个依赖包
npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

2、把Blob.js和 Export2Excel.js这两个文件放到项目中
百度云链接: https://pan.baidu.com/s/1sXMEce5MbTOvgf1yFvd5IQ
密码: qvi7
*此链接转载自@一条小鲨鱼

3、封装

// 导出
export const exportTable = (columns, list, name = '未命名') => {
  return new Promise((resolve, reject) => {
    var columnNames = []
    var columnValues = []
    for (var i = 0; i < columns.length; i++) {
      columnNames[i] = columns[i].label
      columnValues[i] = columns[i].prop
    }
    require.ensure([], () => {
      const { exportJsonToExcel } = require('./Export2Excel')
      const tHeader = columnNames
      const filterVal = columnValues
      const data = list.map(v => filterVal.map(j => v[j]))
      exportJsonToExcel(tHeader, data, name)
      resolve()
    })
  })
}

4、使用

// 声明要导出的字段
const columns = [
  { prop: 'userName', label: '姓名' },
  { prop: 'userPwd', label: '密码' },
  { prop: 'sex', label: '性别' },
  { prop: 'school', label: '学校' }
]
// 调用方法，三个参数：(要导出的字段，后台返回的数据，文件名字)
// data数据格式：
exportTable(columns, data, '文件名').finally(data => {
  // 导出成功要做的事情
})

四、两个数组对象去重

// 方法
export const filterTwoArray = (arr1, arr2, key) => {
  if (arr1.length && arr2.length) {
    return arr1.filter(x => arr2.every(y => y[key] !== x[key]))
  } else {
    return []
  }
}

五、后端返回数据流前端下载方法

实际项目中后台接口有可能是返回一个文档流的方式，前端下载需要处理一下

1、方法封装

// 下载文件
export const downFile = (file, fileName) => {
  return new Promise((resolve, reject) => {
    const blob = new Blob([file], { type: 'application/xls' }) // data就是接口返回的文件流了
    const link = document.createElement('a') // 生成一个a标签。
    link.href = window.URL.createObjectURL(blob) // href属性指定下载链接
    link.download = fileName // dowload属性指定文件名
    link.click() // click()事件触发下载
    resolve()
  })
}

2、使用方法

// 请求接口
// *注意：如果后端返回的文档流格式，前端请求接口时需要传递参数responseType: 'blob'
downloadFile().then(data => {
  // data为后端返回的文档流，第二个参数为文件名字
  downFile(data, '成绩导入模版.xls')
})

六、富文本标签过滤

去除富文本中的HTML标签

// 富文本过滤
export const textFormat = (text) => {
  if (!text) return
  text = text.replace(/ /g, '')
  text = text.replace(/(\n)/g, '')
  text = text.replace(/(\t)/g, '')
  text = text.replace(/(\r)/g, '')
  text = text.replace(/<\/?[^>]*>/g, '')
  text = text.replace(/\s*/g, '')
  return text
}

此条博客会一直更新，有新的方法会一直添加，大家多多关注哦！
觉得有用就给我点个赞吧，蟹蟹，(●ˇ∀ˇ●)
个人联系方式（添加请备注）：
QQ：332983810
微信：hu_jiliang