摘要：組件的代碼組件因為常使用所以多帶帶獨立出來并且結構相當簡單組件過濾器使用在下函數的導入需要這樣寫導入自定義的模塊里面的調用模塊的函數來解析時間是一個自定義的組件不是組件目錄位于這種寫法是為了練習的模塊化編程將多帶帶的一個函數寫成

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

用對象返回,方便處理.