小程序封装时间过滤器的方法

View Filter

filter 理解为管道加工处理, 你扔给我一组数据 经过各种不同类型的管道加工 产出新的数据 但是又不会影响修改原数据, 最终展示给用户.

现有前端框架filter一般:

 time | dateTime('yyy-mm-dd')

使用 | 作为管道符 传递参数进行序列化

缺陷:

截止目前,小程序官方并没有管道实现方式,以下列出了替代几种方案，供大家选择使用.

直接修改原数据

在请求完成之后 对返回值data进行一次数据处理 比如 抽象一个_formatListData方法对 返回进行二次处理.

 _formatListData(list) {
     return list.map((item) => {
          let date = FormatUtil.getDateTime(item.childBirth);
          item.filterChildBirth = `${date.y}-${date.M}-${date.d}`;
      return item;
    }
}

这种方式会给原数据添加新字段 filterChildBirth (原字段为 childBirth) . 最终展示也是显示filterChildBirth 到view上面，多个需要filter的字段都通过这种方式去处理,很明显 对一些业务型filter倒还好 如果遇到filter需要 共享 就比较坑.

ES6 get

data : {
  time : 1511748300571
}

 get time (){    
  return FormatUtil.getDate(this.data.time);
}

通过get方法来实现对字段显示过滤. 只能操作对象 对数组中的item 比较无力.

 

通过wxs 实现共享filter:（推荐）

1.首先我们建立共享filter文件夹,实现一个日期格式化

2.WXS 实现日期格式化（es6语法不能使用)

 var DateFr = {

  getDate: function (time, splitStr) {

 if (!time) return '';

 var date =getDate(time);
 var M = date.getMonth() + 1;
 var y = date.getFullYear();
 var d = date.getDate();

 if (M < 10) M = "0" + M;
 if (d < 10) d = "0" + d;

 if (splitStr)
   return y +splitStr + M +splitStr+d;
 else
   return {
     y: y,
     M: M,
     d: d
   };
   }
 }

 module.exports = {
   getDate: DateFr.getDate
 }

3.在业务页面wxml中引用wxs

   <wxs module="dateFr" src="../../../../filter/dateFr.wxs"></wxs>

4.使用filter

    <text >{{dateFr.getDate(item.createdAt,':')}}</text>