前端开发：基于原生JS的时间过滤实现-一一网

在前端开发的时候，经常会遇到处理时间日期的需求，有时候会需要根据实际情况来对获取到的时间日期做处理，不同的开发者有不同的编码风格，也有不同的选择方式，其实对时间日期的处理（过滤）有很多种方法，有通过第三方日期格式化插件来处理的，有自己写原生JS方法来实现的。通过插件来实现日期格式化处理，只用在项目里面引入插件之后，直接通过插件的调用方法直接处理时间过滤的需求，这种方式可以简化代码，提高代码整洁度。但是，通过原生JS来实现时间过滤也是一种不错的方式，只用把时间过滤的方法封装成公用方法，然后全局调用即可，这也是一种不错的时间过滤方式。

常用的通过第三方插件来处理时间过滤功能那就是前端开发者都很熟悉也经常使用的moment.js的方式来实现，moment.js中文网也把具体的集成方式和用法都讲的很清楚，这里就不在过多介绍，本篇博文只来具体讲解一下通过JS原生来实现时间过滤。

其实通过原生JS来实现时间过滤的方式也很简单，只用把过滤时间的方法搞成一个公共方法，然后通过全局调用，即可。具体的处理时间过滤的方法如下所示：

//时间过滤
export const formatDate = (value, type) => {
  if(value==null){ return ''; }
  let dates = new Date(value);
  if(!isNaN(dates)&&!isNaN(Date.parse(dates))){
    //dates.setHours(dates.getHours()+8);
    let year = dates.getFullYear();
    let month = (dates.getMonth()+1);
    if(month<10) month = '0' + month;
    let day = dates.getDate();
    if(day<10) day = '0' + day;
    let hours = dates.getHours();
    if(hours<10) hours = '0' + hours;
    let minutes = dates.getMinutes();
    if(minutes<10) minutes = '0' + minutes;
    let seconds = dates.getSeconds();
    if(seconds<10) seconds = '0' + seconds;
    if(type==='datetime') {
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    }else{
      return year+'-'+month+'-'+day;
    }
  }else{
    return value;
  }
}
复制代码

上述方法就是通过一级一级来处理获取到的时间，把获取到的时间过滤成需要的格式，然后再在具体的文件里面调用该方法，直接可以实现时间过滤操作，具体使用场景如下所示：

1、使用场景一：在methods方法里面直接进行时间过滤

    //获取最新政策
    getNewPlan(){
      this.apiGetLatestInsuranceProjectDetail({
        insuranceProjectId: this.form.insuranceProjectId,
        insuranceType: this.form.insuranceType,
      }).then(res => {
        if(res.data.result){
          console.log("*-*-*-*-",res.data.result)
          this.form = res.data.result[0];
          this.form.validMonthly = this.formatDate(res.data.result[0].validMonthly, 'date');   //把获取到的时间数据源传入到时间过滤方法，即可过滤
        };
      });
    },
复制代码

2、使用场景二：在template里面直接把需要展示渲染的时间进行时间过滤

	<el-table-column prop="validMonthly" label="生效月份" width="100">
          <template slot-scope="scope">
            {{ formatDate(scope.row.validMonthly, 'date') }}
          </template>
        </el-table-column>
复制代码