Angular2 以及正则表达式笔记

这篇文章会长期更新，作为自己学习的记录，方便回头看看备忘

介入开发

一定要弄清楚老的业务是什么，有输入的位置做好输入验证，常规输入框必须有长度，输入特殊字符，脚本注入检测等基本的文本框检测（限制==如无特殊的业务，必须按照DB 的长度限制）

页面间的联动，必须要覆盖多种场景（比如多开，页面状态变化等）

鼠标右键粘贴能够触发的事件 (input)

Deep Clone Array：

使用 Json.parse() 能够转换无引用的 Array，但是不能够转换带时间的 Array 对象。

使用 Lodash 的 _.cloneDeep() 方法可以完美克隆

验证 网址的正则表达式

(https?://|WWW|www|ftp://|file://)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[.]+[-A-Za-z0-9+&@#/%=~_|]

Js 的 数据过滤

###### C# 里的 LINQ 可以说是极其好用的一个东西，Js 没想到也有类似的数据过滤，终于可以摆脱无聊的循环遍历了

public perprotyNameChange(value) {
        if (value.toLowerCase != undefined && value.toLowerCase != "") {
            this.propertiesNameShow = this.propertiesName.filter((s) => s.toLowerCase().indexOf(value.toLowerCase()) !== -1);
        }
        else {
            this.propertiesNameShow = this.propertiesName;
        }
    }

注意：这里的 callback 不能写成 (s)=>{s.toLowerCase().indexOf(value.toLowerCase())!==-1;} 这样会使过滤器失效

气泡弹框

框主体（内容部分）：

.tip-bubble {
        position: absolute;
        margin: 1em 0em 3em;
        width: 536px;
        padding: 5px;
        line-height: 1.2;
        text-align: center;
        color: #fff;
        top: 62px;
        z-index: 2;
        background: #202020;
        border-radius: 3px;
    }

气泡部分，通过 :before 来实现

.tip-bubble:before {
        content: "\00a0";
        width: 0;
        height: 0;
        display: block;
        border-style: solid;
        border-width: 10px;
        border-color: transparent transparent #202020 transparent;
        position: absolute;
        z-index: 1;
        bottom: 20px;
        left: 268px;
    }

效果：