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

发表于 更新于 分类于 Disqus： 本文字数： 4.2k 阅读时长 ≈ 7 分钟

一个合法检测的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能满足需求，故选择之。