前言
在项目中经常会遇到时间戳转换，手机号、身份证号脱敏，状态的转换等，如果不复用会存在很多问题：
一、维护困难
二、开发重复性工作比较多
三、代码量比较多，不雅观那么，如何解决这些问题呢？
方案
我们可以使用 Vue 的过滤器 Filter 定义工具类 globalFilter.js，然后全局注册到 Vue 中，以供各个模块使用。
// 全局导入过滤器
import filter from './utils/globalFilter'
Object.keys(filter).forEach(key => Vue.filter(key, filter[key]))
当然，前提是要先在 utils 文件夹中创建对应的文件 globalFilter.js 那么 globalFilter.js 文件中要怎么写过滤器呢？
我们以时间戳转换为例：
一般情况下，我们会写个时间戳转换的 function，粗糙一点的写法是在 function 最后 return 需要的格式(如：xxxx/xx/xx)，但是假如想要换成其他格式，或者想要把时分秒也加上（如：xxxx-xx-xx xx:xx），就需要在写一个方法，或者高级一点的写法是，把需要的格式当成参数，这样一个 function 就够了，但是有日期处理类库 moment ，为什么要那么麻烦写那么多代码呢？
moment 使用
1. npm 安装
npm install moment --save
2. 在 globalFilter 中引入，并使用
// vue的时间格式化插件
import moment from 'moment'
// 时间格式化函数，默认格式为YYYY-MM-DD HH:mm:ss，若需要其他格式，只需使用的时候将想要的格式作为参数传入即可
// 使用方法 {{时间戳 | dateFormat}} 或 {{时间戳 | dateFormat('YYYY-MM-DD HH:mm:ss')}}
const dateFormat = (dataStr, pattern = 'YYYY/MM/DD') => {
return moment(dataStr).format(pattern)
}
使用的时候，也很方便，直接在html代码处，用过滤器的形式使用就行了
{{data | dateFormat('YYYY-MM-DD HH:mm:ss')}}
这样是不是比自己写个方法要简化的多呢？
手机号、身份证号脱敏
// 手机号脱敏
const telHide = phone => {
if (phone === undefined || phone === null) {
return ''
}
return phone.toString().replace(/(\d{3})\d{4}(\d*)/, '$1****$2')
}
// 身份证号脱
const IDCardHide = IDCard => {
if (IDCard === undefined || IDCard === null) {
return ''
}
return IDCard.toString().replace(/(\d{8})\d{8}(\d*)/, '$1********$2')
}
使用方法和时间戳一样，也是过滤器的形式
{{ phone | phone }}
状态值的转换
比如，交易类型，一般情况，后台会返回给1，2，3这种状态值，需要前端去对应，优雅的写法是在这个文件的js中去做处理，页面直接渲染就好了，但是很多时候，可能这个状态不止在一个页面中使用，所以提取成公用的还是很有必要的，这样即使后期修改状态值，前端也可以很快的改好，不必一个文件一个文件去找
// 充值类型
const SubTradeType = type => {
const status = {
// 1 在线充值、2 线下充值
'1': '在线充值',
'2': '线下充值'
}
return status[type]
}
使用的时候，还是过滤器的写法
{{subTradeType | SubTradeType}}
当然了，上述这些，都需要在globalFilter.js最后export
export default {
dateFormat,
telHide,
IDCardHide,
SubTradeType
}
网友评论