摘要：組件的代碼組件因?yàn)槌Ｊ褂盟远鄮И?dú)立出來并且結(jié)構(gòu)相當(dāng)簡單組件過濾器使用在下函數(shù)的導(dǎo)入需要這樣寫導(dǎo)入自定義的模塊里面的調(diào)用模塊的函數(shù)來解析時間是一個自定義的組件不是組件目錄位于這種寫法是為了練習(xí)的模塊化編程將多帶帶的一個函數(shù)寫成

split組件因?yàn)槌Ｊ褂?所以多帶帶獨(dú)立出來,并且結(jié)構(gòu)相當(dāng)簡單.

{{rating.rateTime | formatDate}}

//在es6下,export 函數(shù)function的導(dǎo)入需要這樣寫
import { formatDate } from "../../common/js/date"; //導(dǎo)入自定義的date模塊

//vue里面的filters
filters: {
      formatDate(time) {
        let date = new Date(time);
        //調(diào)用date模塊的formatDate函數(shù)來解析時間
        return formatDate(date, "yyyy-MM-dd hh:mm");
      }
    },
    

formatDate.js是一個自定義的js組件,不是vue組件,目錄位于:src/common/js,這種寫法是為了練習(xí)js的模塊化編程

將多帶帶的一個函數(shù)寫成一個模塊

通過export導(dǎo)出函數(shù)

通過import導(dǎo)入函數(shù)

export function formatDate(date, fmt) { //在es6下導(dǎo)出一個函數(shù)
//對一個或多個y進(jìn)行匹配,匹配到就進(jìn)行年的替換(年有四位,所以需要特殊處理)
  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()
  };
  //對月,日,時,分,秒進(jìn)行匹配替換(這些都是兩位,可以一起處理)
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) { //匹配到key例如MM
      let str = o[k] + ""; //然后o["MM"] 就是date.getMonth() + 1
      
      //如果匹配到的時間是1位數(shù),例如是M,那么就直接使用date.getMonth() + 1的值,
      //如果是兩位數(shù),那么就在前面補(bǔ)0,使用padLeftZero函數(shù)
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); 
    }
  }
  return fmt;
};

//先加兩個0,然后再根據(jù)長度截取(因?yàn)樽铋L也就2個0的長度)
function padLeftZero(str) {
  return ("00" + str).substr(str.length);
}

這是一個js模塊,負(fù)責(zé)html5的localstoage存儲和讀取的,位置: src/common/js/store.js

使用的方法是:

//在es6下,export 函數(shù)function的導(dǎo)入需要這樣寫
 import { saveToLocal, loadFromLocal } from "../../common/js/store";

代碼:

//存儲
//傳入三個參數(shù),seller的id,要存儲的key和value
export function saveToLocal (id, key, value) {
//需要加上window對象來使用localstorage
  let seller = window.localStorage.__seller__; //使用__只是一種標(biāo)記寫法,標(biāo)記是自定義的某種編碼規(guī)范,這里代表這只是seller的數(shù)據(jù)
  if (!seller) { //第一次生成seller的時候初始化
    seller = {}; 
    seller[id] = {};
  } else {
    seller = JSON.parse(seller); //json字符串需要解析
    if (!seller[id]) { //不同seller的時候初始化
      seller[id] = {};
    }
  }
  seller[id][key] = value; //生成當(dāng)前的seller對象
  //localStorage只能存儲字符串,需要轉(zhuǎn)成json字符串
  window.localStorage.__seller__ = JSON.stringify(seller);
}

//讀取
三個參數(shù),seller的id,之前存儲的key,和一個默認(rèn)值
export function loadFromLocal (id, key, def) {
  let seller = window.localStorage.__seller__;
  if (!seller) { //讀取不到返回默認(rèn)值
    return def; 
  }
  seller = JSON.parse(seller)[id]; //json解析
  if (!seller) { //解析失敗返回默認(rèn)值
    return def;
  }
  let ret = seller[key]; 
  return ret || def; //解析成功但是沒有這個seller的id的也返回默認(rèn)值
}

在node里面,沒有默認(rèn)全局window對象,所以需要指定加上才能使用window的相關(guān)方法和屬性

seller[id][key] = value; 相當(dāng)于是某個id的seller的某個屬性(key)和值(value)保存為一個對象

關(guān)于寫入的邏輯:先讀取localstorage的已有值,判斷是否存在,然后再去解析localstoage的已有值,判斷是否等于當(dāng)前的數(shù)據(jù)的key值(id),最后再處理最終的值是否存儲,這里邏輯需要先判斷已有值.

關(guān)于讀取的邏輯:先讀取localstorage判斷是否有值,然后再去判斷解析localstoage讀取得到的值,最后再處理最終得到的值是否正常,按順序進(jìn)行邏輯處理

這個js模塊負(fù)責(zé)獲取url的參數(shù),位置:src/common/js/util.js

/**
 * 解析url參數(shù)
 * @example ?id=12345&a=b
 * @return Object {id:12345,a:b}
 */

export function urlParse () {
  let url = window.location.search; //獲取到url的所有參數(shù)
  let obj = {};
  let reg = /[?&][^?&]+=[^?&]+/g; //正則判斷獲取
  let arr = url.match(reg); //正則獲取后會保存到一個數(shù)組
  // ["?id=12345","&a=b"]
  if (arr) {
    arr.forEach((item) => {
      let tempArr = item.substring(1).split("="); //將第一位去掉,然后用等號分隔
      let key = decodeURIComponent(tempArr[0]); //URI對于utf8格式會轉(zhuǎn)碼,所以這里需要解碼
      let val = decodeURIComponent(tempArr[1]);
      obj[key] = val;
    });
  }
  return obj;
}

讀取url的所有參數(shù),例如http://a.com/?id=12345&a=b的?id=12345&a=b

然后進(jìn)行正則匹配,/[?&][^?&]+=[&?&]+/g,以?id=12345&a=b為舉例:

[?&] 先匹配?和&的,url參數(shù)都是有這個2個字符作為連接符,就是指匹配?

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

= 匹配等號

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

加起來就是能夠匹配?id=12345&a=b

用對象返回,方便處理.