split,formatDate,store,util组件

摘要：组件的代码组件因为常使用所以多带带独立出来并且结构相当简单组件过滤器使用在下函数的导入需要这样写导入自定义的模块里面的调用模块的函数来解析时间是一个自定义的组件不是组件目录位于这种写法是为了练习的模块化编程将多带带的一个函数写成

split组件因为常使用,所以多带带独立出来,并且结构相当简单.

{{rating.rateTime | formatDate}}

//在es6下,export 函数function的导入需要这样写
import { formatDate } from "../../common/js/date"; //导入自定义的date模块

//vue里面的filters
filters: {
      formatDate(time) {
        let date = new Date(time);
        //调用date模块的formatDate函数来解析时间
        return formatDate(date, "yyyy-MM-dd hh:mm");
      }
    },
    

formatDate.js是一个自定义的js组件,不是vue组件,目录位于:src/common/js,这种写法是为了练习js的模块化编程

将多带带的一个函数写成一个模块

通过export导出函数

通过import导入函数

export function formatDate(date, fmt) { //在es6下导出一个函数
//对一个或多个y进行匹配,匹配到就进行年的替换(年有四位,所以需要特殊处理)
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
  }
  let o = {
    "M+": date.getMonth() + 1, //js的月是从0开始算,所以要加1
    "d+": date.getDate(),
    "h+": date.getHours(),
    "m+": date.getMinutes(),
    "s+": date.getSeconds()
  };
  //对月,日,时,分,秒进行匹配替换(这些都是两位,可以一起处理)
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) { //匹配到key例如MM
      let str = o[k] + ""; //然后o["MM"] 就是date.getMonth() + 1
      
      //如果匹配到的时间是1位数,例如是M,那么就直接使用date.getMonth() + 1的值,
      //如果是两位数,那么就在前面补0,使用padLeftZero函数
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); 
    }
  }
  return fmt;
};

//先加两个0,然后再根据长度截取(因为最长也就2个0的长度)
function padLeftZero(str) {
  return ("00" + str).substr(str.length);
}

这是一个js模块,负责html5的localstoage存储和读取的,位置: src/common/js/store.js

使用的方法是:

//在es6下,export 函数function的导入需要这样写
 import { saveToLocal, loadFromLocal } from "../../common/js/store";

代码:

//存储
//传入三个参数,seller的id,要存储的key和value
export function saveToLocal (id, key, value) {
//需要加上window对象来使用localstorage
  let seller = window.localStorage.__seller__; //使用__只是一种标记写法,标记是自定义的某种编码规范,这里代表这只是seller的数据
  if (!seller) { //第一次生成seller的时候初始化
    seller = {}; 
    seller[id] = {};
  } else {
    seller = JSON.parse(seller); //json字符串需要解析
    if (!seller[id]) { //不同seller的时候初始化
      seller[id] = {};
    }
  }
  seller[id][key] = value; //生成当前的seller对象
  //localStorage只能存储字符串,需要转成json字符串
  window.localStorage.__seller__ = JSON.stringify(seller);
}

//读取
三个参数,seller的id,之前存储的key,和一个默认值
export function loadFromLocal (id, key, def) {
  let seller = window.localStorage.__seller__;
  if (!seller) { //读取不到返回默认值
    return def; 
  }
  seller = JSON.parse(seller)[id]; //json解析
  if (!seller) { //解析失败返回默认值
    return def;
  }
  let ret = seller[key]; 
  return ret || def; //解析成功但是没有这个seller的id的也返回默认值
}

在node里面,没有默认全局window对象,所以需要指定加上才能使用window的相关方法和属性

seller[id][key] = value; 相当于是某个id的seller的某个属性(key)和值(value)保存为一个对象

关于写入的逻辑:先读取localstorage的已有值,判断是否存在,然后再去解析localstoage的已有值,判断是否等于当前的数据的key值(id),最后再处理最终的值是否存储,这里逻辑需要先判断已有值.

关于读取的逻辑:先读取localstorage判断是否有值,然后再去判断解析localstoage读取得到的值,最后再处理最终得到的值是否正常,按顺序进行逻辑处理

这个js模块负责获取url的参数,位置:src/common/js/util.js

/**
 * 解析url参数
 * @example ?id=12345&a=b
 * @return Object {id:12345,a:b}
 */

export function urlParse () {
  let url = window.location.search; //获取到url的所有参数
  let obj = {};
  let reg = /[?&][^?&]+=[^?&]+/g; //正则判断获取
  let arr = url.match(reg); //正则获取后会保存到一个数组
  // ["?id=12345","&a=b"]
  if (arr) {
    arr.forEach((item) => {
      let tempArr = item.substring(1).split("="); //将第一位去掉,然后用等号分隔
      let key = decodeURIComponent(tempArr[0]); //URI对于utf8格式会转码,所以这里需要解码
      let val = decodeURIComponent(tempArr[1]);
      obj[key] = val;
    });
  }
  return obj;
}

读取url的所有参数,例如http://a.com/?id=12345&a=b的?id=12345&a=b

然后进行正则匹配,/[?&][^?&]+=[&?&]+/g,以?id=12345&a=b为举例:

[?&] 先匹配?和&的,url参数都是有这个2个字符作为连接符,就是指匹配?

[^?&]+ 然后匹配非?和&的多个,就是指匹配id

= 匹配等号

[^?&]+ 然后匹配非?和&的多个,就是指匹配12345

加起来就是能够匹配?id=12345&a=b

用对象返回,方便处理.