jQuery、zepto、js常用小技巧


Posted in Javascript onFebruary 12, 2017

以下只为记录自己工作常用的片段和心得, 如有问题请指正, 多谢~

jQuery/zepto判断元素是否存在

// 判断长度是否存在, 正确
if ($elem.length) {
}

// 错误, 因为空数组也是true
if ($elem) {
}

合理判断数据类型

先看代码:

function case(str) {
  return str.match(/reg/);
}

看着没问题, 但当 str 为空(false, null等)时就挂了, 适当的检查让代码更健壮, 如:

function case(str) {
  return "string" === typeof str ? str.match(/reg/) : null;

  // 或者强制转换下
  return String(str).match(/reg/);
}

function case2(callback) {
  if ("function" === typeof callback) {
    callback();
  }
}

再比如, 要获取地址栏的参数:

function getQuery(key) {
  // 不论页面链接有没有querystring, location.search都会是字符串
  // substr为了忽略?号
  var result = location.search.substr(1).match(new RegExp("(?:^|&)" + key + "=(.+?)(?:$|&)"));

  // 如果匹配成功为数组
  return result ? result[1] : result;
}

因为要判断结果是否存在从而多了个变量 result , 然而可以使用默认值替换:

function getQuery(key) {
  return (location.search.substr(1).match(new RegExp("(?:^|&)" + 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 赋值和 delete DOM.dataset.key 删除, 如: document.body.dataset.xxoo = 1
常用于存放一些自定义数据, 如: <a href="#" rel="external nofollow" data-uid="1" data-name="xxoo">我是一个兵</a>
语义化更强
.data, .attr, .prop, dataset的区别

注: .data, .attr, .prop是 jQuery, zepto 的方法

名称 描述 是否显示在dom树上
attr 操作 dom.getAttribute
prop 操作元素的 dom 属性, 常用于选中 selected, checked 、禁用 disabled 等
dataset 操作元素的节点数据

对于 .data 跟库的有关, 如:

名称 描述 是否显示在dom树上
jQuery .data(key) - 先判断缓存对象, 不存在则获取 attr('data-key') 并写入缓存到 $.cache[id].data[key] .data(key, value) - 设置缓存
zepto 直接使用 .attr('data-' + key, value)
zepto - 加载 data.js .data(key) - 先判断缓存对象, 不存在则获取 attr('data-key') .data(key, value) - 设置缓存
有以上结论了, 那么可以根据自己的场景选择了, 比如在 css 里有使用 div[data-xx='1'] {} 这样的选择器来控制样式, 那么就得使用 .attr() 或者 dataset 来操作了, 你懂的~
Javascript 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 #Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 #Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 #Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 #Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 #Javascript
浅谈jQuery中事情的动态绑定
Feb 12 #Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 #Javascript
You might like
php while循环得到循环次数
2013/10/26 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
python em算法的实现
2020/10/03 Python
10个示例带你掌握python中的元组
2020/11/23 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
汽车专业学生自我评价
2014/01/19 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
java版 简单三子棋游戏
2022/05/04 Java/Android