猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 >

jQuery、zepto、js常用小技巧

2018-09-07 08:51:50 作者:yxl 次阅读 技术专栏

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


jQuery/zepto判断元素是否存在

// 判断长度是否存在, 正确

if ($elem.length) {

}

// 错误, 因为空数组也是true

if ($elem) {

}

js

合理判断数据类型

先看代码:


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();

    }

}

js

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


function getQuery(key) {

    // 不论页面链接有没有querystring, location.search都会是字符串

    // substr为了忽略?号

    var result = location.search.substr(1).match(new RegExp('(?:^|&)' + key + '=(.+?)(?:$|&)'));

    // 如果匹配成功为数组

    return result ? result[1] : result;

}

js

因为要判断结果是否存在从而多了个变量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

艾玛, 判断那么长, 但不判断直接用可能会报js错, 于是:


// 原判断

success: res => {

    try {

        // 尝试使用, 当报错时进入下面分支

        res.data.result[0].list.forEach();

    }

    catch (e) {

        // 数据处理出错

    }

}

js

合理使用dataset

dataset是指在html元素中添加的以data-*为名称的属性字段

点击查看兼容性

使用DOM.dataset获取元素的DOMStringMap对象, 可以直接DOM.dataset.key = value赋值和delete DOM.dataset.key删除, 如: document.body.dataset.xxoo = 1

常用于存放一些自定义数据, 如: <a href="#" 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来操作了, 你懂的~


ajax的那些事

complete无论success还是error都会执行, 并且会该这2个方法之后执行, 常用于重置状态

options.timeout默认为0, 也就是会等待服务器超时, 看源码: jquery-2.2.4.js#L8648-L8652

jsonp = callback+createScript, 因为需要往window上挂载, jQuery和zepto的作法是, 先把window[callbackName]赋给一个临时变量, 然后让回调设置到window上, 使用完后再把临时变量换回, 看源码: jquery-2.2.4.js#L9312-L9328

jQuery的options.jsonp默认为callback, jsonpCallback默认是jQuery_时间缀_索引, 见源码: jquery-2.2.4.js#L9265-L9272

zepto的options.jsonp默认为callback, jsonpCallback默认是Zepto索引(老版本的是jsonp索引), 见源码: zepto-1.2.0.js/ajax.js#L88

options.dataType为script, jsonp时options.cache自动关闭, 见源码: jquery-2.2.4.js#L9215-L9222, zepto-1.2.0.js/ajax.js#L221-L225


凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: js
0

网友评论