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
用对象返回,轻易处置惩罚.
