时间:2021-05-25
前言
在开发中经常会在DOM上存储一些自定义数据,我们可以通过setAttribute方法来实现。但是当数据为引用类型时,存储后的数据却无效。这里将用原生的JS对data方法进行实现。
使用setAttribute:
可以从上面的代码中看出,存进去的是个Object,取出来的是Object.toString()所产出的字符串。
分析
在JS经典类库-jQuery中存在data方法是通过jQuery.cache的方式进行数据存储,那么还有没有其它方法可以实现?
由于使用场景不同,我想实现的方式是将数据直接存储到DOM节点上,以达到使用时更方便简捷的目的。
那如何存储? 变量testData存储的是通过document.querySeletor('#test-data')获取到的Element,而Element是Object的一个实例。通过[testData instanceof Object]可以进行验证。
那么一切都简易了,即然是Object类型,那么就可以随意的增删自定义属性。
通过在Element的原型上增加data方法来实现DOM扩展
这里来试一下:
解决NodeList存储
现在还有一个问题, 通过Element.prototype绑定的方法只支持Element类生效,而对NodeList类并无效果.
可以通过下面这些代码进行效果测试:
var testDataList = document.querySelectorAll('.test-data-list'); // 获取的为NodeList 而非 ElementtestDataList.data('name', 'baukh'); // Uncaught TypeError: testDataList.data is not a function这肯定不是想要的结果, 那么NodeList类就需要如下处理:
来测试下NodeList类的data实现:
这样就功能上就完成了.
当然也可以将NodeList与Element进行互换, 具体情况具体考虑.
很简单不是吗?
顺带说一下,Array类型的数据,也可以增加自定义属性。
随笔一行
这是前端最好的时代, 这也是前端最坏的时代。 众多前端框架满天飞,随着 jQuery 在前端行业的慢慢弱化,总是会有一种斯人远去,何者慰籍的感觉。互勉吧,各位。
另推荐个表格组件gridManager
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js+h5canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一、使用技术原生js技术+html5canvas画图利用Ma
本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下:加载webview的类publicclassMainActivityextendsAc
下面是原生js实现查找/添加/删除/指定元素的class的方法: 代码如下:window.onload=function(){vargaga=docume
本文章来给大家介绍js判断iframe中元素是否存在代码,有需要了解的朋友可进入参考。一、纯原生态js实现方法,代码如下:varbb=document.getE
最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jq