jQuery Zepto JS开发技巧：元素存在性判断、类型安全与Dataset使用指南

引言

本文旨在记录日常工作中常用的代码片段与心得，若内容有误欢迎指正，感谢阅读。

jQuery与Zepto元素存在性判断

在使用jQuery或Zepto时，判断DOM元素是否存在是常见需求。


// 判断长度是否存在, 正确
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();
  }
}

此外，获取URL地址栏参数也是高频操作。


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-catch语句。

虽然正常流程中不推荐滥用try-catch，但在处理未知结构或复杂异步接口返回数据时，它能有效防止程序崩溃。例如：


// 原判断
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错误。此时可以使用try-catch包裹核心逻辑：


// 原判断
success: res => {
  try {
    // 尝试使用, 当报错时进入下面分支
    res.data.result[0].list.forEach();
  }
  catch (e) {
    // 数据处理出错
  }
}

Dataset与jQuery数据方法详解

合理使用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进行操作，因为jQuery的.data默认不写入DOM属性。

jQuery与Zepto开发实用技巧：元素检测、类型校验与Dataset详解

引言

jQuery与Zepto元素存在性判断

类型安全与代码健壮性

异步数据处理的try-catch策略

Dataset与jQuery数据方法详解

实用工具推荐