jQuery、zepto、js常用小技巧
以下只为记录自己工作常用的片段和心得,如有问题请指正,多谢~
jQuery/zepto判断元素是否存在
//判断长度是否存在,正确
if($elem.length){
}
//错误,因为空数组也是true
if($elem){
}
合理判断数据类型
先看代码:
functioncase(str){
returnstr.match(/reg/);
}
看着没问题,但当str为空(false,null等)时就挂了,适当的检查让代码更健壮,如:
functioncase(str){
return"string"===typeofstr?str.match(/reg/):null;
//或者强制转换下
returnString(str).match(/reg/);
}
functioncase2(callback){
if("function"===typeofcallback){
callback();
}
}
再比如,要获取地址栏的参数:
functiongetQuery(key){
//不论页面链接有没有querystring,location.search都会是字符串
//substr为了忽略?号
varresult=location.search.substr(1).match(newRegExp("(?:^|&)"+key+"=(.+?)(?:$|&)"));
//如果匹配成功为数组
returnresult?result[1]:result;
}
因为要判断结果是否存在从而多了个变量result,然而可以使用默认值替换:
functiongetQuery(key){
return(location.search.substr(1).match(newRegExp("(?:^|&)"+key+"=(.+?)(?:$|&)"))||["","我是默认值,因为前面为空就到我了"])[1];
}
合理try,catch
在正常情况下不推荐使用try,但在一些未知情况下建议使用,比如:异步接口成功后的数据结构太多:
//原判断
success:res=>{
//zepto里空的200响应也会触发success
if(res&&res.data&&res.data.result&&res.data.result[0]&&res.data.result[0].list&&res.data.result[0].list.length){
//成功
res.data.result[0].list.forEach();
}
else{
//数据处理出错
}
}
艾玛,判断那么长,但不判断直接用可能会报js错,于是:
//原判断
success:res=>{
try{
//尝试使用,当报错时进入下面分支
res.data.result[0].list.forEach();
}
catch(e){
//数据处理出错
}
}
合理使用dataset
dataset是指在html元素中添加的以data-*为名称的属性字段
点击查看兼容性
使用DOM.dataset获取元素的DOMStringMap对象,可以直接DOM.dataset.key=value赋值和deleteDOM.dataset.key删除,如:document.body.dataset.xxoo=1
常用于存放一些自定义数据,如:<ahref="#"rel="externalnofollow"data-uid="1"data-name="xxoo">我是一个兵</a>
语义化更强
.data,.attr,.prop,dataset的区别
注:.data,.attr,.prop是jQuery,zepto的方法
对于.data跟库的有关,如:
.data(key,value) -设置缓存
.data(key,value) -设置缓存