这篇文章会长期更新,作为自己学习的记录,方便回头看看备忘
介入开发
一定要弄清楚老的业务是什么,有输入的位置做好输入验证,常规输入框必须有长度,输入特殊字符,脚本注入检测等基本的文本框检测(限制==如无特殊的业务,必须按照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;
}
效果: