split,formatDate,store,util組件

split組件(vue)的代碼

split組件由於常使用,因此單獨獨立出來,而且結構至關簡單.

<template>
  <div class="split"></div>
</template>

<script>
  export default {};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .split
    width: 100%
    height: 16px
    border-top: 1px solid rgba(7, 17, 27, 0.1)
    border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    background: #f3f5f7
</style>

formatDate.js組件

<!--vue過濾器使用-->
<div class="time">{{rating.rateTime | formatDate}}</div>

//在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);
}

store.js組件

這是一個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讀取獲得的值,最後再處理最終獲得的值是否正常,按順序進行邏輯處理

util.js組件

這個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

• 用對象返回,方便處理.