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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
党建工作先进材料
2014/05/02 职场文书
校园文明标语
2014/06/13 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL