工作中的遇到的一些小知识 2

一个合法检测的Validator

合法检测是在有表单或数据提交时常见的需求,随手撸了一个。由于考虑的业务场景比较复杂,代码也有点臃肿。拓展时,只需要修改上面的提示信息常量和新的test方法即可。也支持自己传入判断函数和message,针对比较复杂的校验情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
const TYPE_VALIDATE_MESSAGE = {
isNumber: '不是一个数字',
isObject: '不是一个对象',
isArray: '不是一个数组',
lt: '数值过大',
gt: '数值过小',
st: '长度过短',
ht: '长度过长'
notEmpty: '需要非空',
len: '长度不合规范',
in: '不在可选范围内',
reg: '无法匹配指定模式'
}
// 供validate使用
util.test = {
isObject: _ => Object(_) === _,
isNumber: _ => typeof _ == 'number',
isArray: _ => Array.isArray(_),
notEmpty: _ => _.length > 0,
lt: (num, limit) => num < limit,
gt: (num, limit) => num > limit,
st: (_, limit) => _.length < limit,
ht: (_, limit) => _.length > limit,
in: (_, range) => ~range.indexOf(_),
len: (_, length) => _.length === length,
reg: (_, reg) => reg.test(_)
}
/**
* 数据校验
* @author: shenlvmeng
* @params value {any} 校验数值 输入单个数值使用verify校验 输入对象使用verifyMap校验
* @method verify 校验单个数值
* @method verifyMap 校验对象
* @return {Object} 包含success和message的对象
*/
util.validate = (value) => {
// 方便传递到外界修改
let message = { content: '' };
function verify(val, validators, key) {
if (!Array.isArray(validators)) validators = [validators];
return validators.every(v => {
let isRight;
if (util.test.isObject(v)) {
isRight = util.test[Object.keys(v)[0]](val, Object.values(v)[0])
!isRight && (message.content = `${key || val}${TYPE_VALIDATE_MESSAGE[Object.keys(v)[0]]}`);
} else {
isRight = util.test[v](val);
!isRight && (message.content = `${key || val}${TYPE_VALIDATE_MESSAGE[v]}`);
}
return isRight;
});
}
return {
/**
* 单个数值使用
* @params validators { String|Array|Object } 校验函数 必须是util中已定义的函数
* @params String 类型时为函数名; Object类型时为函数名和对应入参; Array时为以上的列表
*/
verify(validators) {
return {
success: verify(value, validators),
message: message.content,
}
},
/**
* 校验整个对象时使用
* @params config { Object } 校验函数 针对Object中每个key的校验
* @params 每个key的value服从verify的格式,当key为function类型时交给调用方自己处理
*/
verifyMap(config) {
if (!util.test.isObject(value)) throw new Error('Invalid value type. It should be an Object.');
return {
success: Object.keys(config).every(key => (
typeof config[key] === 'function' ? config[key](value[key], message)
: verify(value[key], config[key], key))
),
message: message.content,
}
}
}
}

实际应用中发现,verifyMap方法用的比较多。使用样例如下;

1
2
3
4
5
6
7
8
9
10
examine() {
return util.validate(formData).verifyMap({
userName: ['notEmpty', { st: 6 }, { ht: 15 }],
password: ['notEmpty', { st: 6 }, { ht: 15 }],
age: ['isNumber', { lt: 18 }],
gender: {in: ['male', 'female']},
email: {'reg': /email pattern/},
isAccepted: (value, message) => value ? value : (message.content = '请接收用户协议', false)
});
},

Linux清理大文件

  • df -h查看存储情况
  • du -sh * | grep G查找当前目录下大于1G的大文件,挨个确认删除即可

当前页面窗口活动状态检查

利用visibilityChangeAPI,配合visibilityState检查窗口状态。

1
2
3
4
5
6
7
8
9
10
11
// subscribe to visibility change events
document.addEventListener('visibilitychange', function () {
// fires when user switches tabs, apps, goes to homescreen, etc.
if (document.visibilityState === 'hidden') {
document.title = 'Baby, Come Back!'
}
// fires when app transitions from prerender, user returns to the app / tab.
if (document.visibilityState === 'visible') {
document.title = defaultTitle;
}
});

IntersectionObserver

监测页面元素和视口的交错关系的DOM API,目前浏览器支持度不高。可以用来方便地实现懒加载和页面无限滚动。

参考

图种

  • Windows,copy /b image.jpg+zip.rar output.jpg,更改输出图片后缀为rar得到压缩包
  • Linux,cat image.jpg zip.rar > output.jpg,同上

draggable with Vue

业务中有拖拽需求,在试用多个轮子后,最终选择了vue-slicksort

  • Vue Draggable
  • Vue Dragula
  • Vue slicksort
GitHub名 流行度 依赖/原理 功能完善度 文档完善度 使用舒适度 备注
vuedraggable star数3859,很流行 依赖sortable.js,后者依赖HTML5的draggable API 功能丰富强大,有很多别人踩过的坑 文档比较丰富 通过组件包裹形式使用 侵入性小 优 有兼容性问题,Chrome66.0.3359.181 Mac OSX 10.13.1下无法通过拖动换位
vue-dragula star数100+,上次更新1年前 依赖dragula.js 功能一般 不完善,几乎都是dragula的API 通过Vue.use的形式 + directives的方式引入,侵入式一般 使用效果不好,实现时没有拖动和移动的动效
vue-slicksort star数100+,更新较活跃 0依赖,不基于HTML5 drag API,支持触摸屏,兼容性好 功能一般,支持平面拖动 较完善,有样例、API解释和FAQ 略糟糕,需要使用mixin的形式,通常意味着额外的组件定义 展示效果优秀,能满足需求

综上,考虑到只有vue-slicksort能满足需求,故选择之。