利用原生JS实现data方法示例代码


Posted in Javascript onMay 28, 2019

前言

在开发中经常会在DOM上存储一些自定义数据,我们可以通过setAttribute方法来实现。但是当数据为引用类型时,存储后的数据却无效。这里将用原生的JS对data方法进行实现。

使用setAttribute:

<div id="test-data"></div>
<p class="test-data-list"></p>
<p class="test-data-list"></p>
<p class="test-data-list"></p>
<p class="test-data-list"></p>
var testData = document.querySeletor('#test-data');
testData.setAttribute('baukh', {a:1,b:2})// 执行后DOM节点变化为<div baukh="[object Object]"></div>
testData.getAttribute('baukh'); // => "[object Object]"

可以从上面的代码中看出,存进去的是个Object,取出来的是Object.toString()所产出的字符串。

分析

在JS经典类库-jQuery中存在data方法是通过jQuery.cache的方式进行数据存储,那么还有没有其它方法可以实现?

由于使用场景不同,我想实现的方式是将数据直接存储到DOM节点上,以达到使用时更方便简捷的目的。

那如何存储? 变量testData存储的是通过document.querySeletor('#test-data')获取到的Element,而Element是Object的一个实例。通过[testData instanceof Object]可以进行验证。

那么一切都简易了,即然是Object类型,那么就可以随意的增删自定义属性。

通过在Element的原型上增加data方法来实现DOM扩展

Element.prototype.data = function(key, value){
 var _this = this,
  _dataName = 'testData', // 存储至DOM上的对象标记, 这里只是测试用名
  _data = {};
 // 未指定参数,返回全部
 if(typeof key === 'undefined' && typeof value === 'undefined'){
  return _this[_dataName];
 }
 // setter
 if(typeof(value) !== 'undefined'){
  // 存储值类型为字符或数字时, 使用attr执行
  var _type = typeof(value);
  if(_type === 'string' || _type === 'number'){
   _this.setAttribute(key, value);
  }
  _data = _this[_dataName] || {};
  _data[key] = value;
  _this[_dataName] = _data;
  return this;
 }
 // getter
 else{
  _data = _this[_dataName] || {};
  return _data[key] || _this.getAttribute(key);
 }
};

这里来试一下:

var testData = document.querySelector('#test-data');
// 字符串类型测试
testData.data('name', 'baukh');
console.log(testData.data('name')); // => 'baukh'
// 对象类型测试
testData.data('info', {'name': 'baukh', 'age': 27});
console.log(testData.data('info')); // => Object {name: "baukh", age: 27}

解决NodeList存储

现在还有一个问题, 通过Element.prototype绑定的方法只支持Element类生效,而对NodeList类并无效果.

可以通过下面这些代码进行效果测试:

var testDataList = document.querySelectorAll('.test-data-list'); // 获取的为NodeList 而非 Element
testDataList.data('name', 'baukh'); // Uncaught TypeError: testDataList.data is not a function

这肯定不是想要的结果, 那么NodeList类就需要如下处理:

NodeList.prototype.data = function (key, value) {
 // setter
 if(typeof(value) !== 'undefined'){
  [].forEach.call(this, function (element, index) {
   element.data(key, value);
  });
  return this;
 }
 // getter
 else{
  return this[0].data(key, value); // getter 将返回第一个
 }
};

来测试下NodeList类的data实现:

var testDataList = document.querySelectorAll('.test-data-list'); // 获取的为NodeList 而非 Element
testDataList.data('name', 'baukh'); // Uncaught TypeError: testDataList.data is not a function
// 字符串类型测试
testDataList.data('name', 'baukh');
console.log(testDataList.data('name')); // => 'baukh'
// 对象类型测试
testDataList.data('info', {'name': 'baukh', 'age': 27});
console.log(testDataList.data('info')); // => Object {name: "baukh", age: 27}

这样就功能上就完成了.

当然也可以将NodeList与Element进行互换, 具体情况具体考虑.

很简单不是吗?

顺带说一下,Array类型的数据,也可以增加自定义属性。

var ar = [1,2,3];
console.log(ar instanceof Object); //true 能添加自定义属性的原因就在这里,Array也是Object的实例。
ar.test1 = {a:1,b:2};
console.log(ar); //[1, 2, 3, test1: Object]
console.log(ar.test1); //Object {a: 1, b: 2}

随笔一行

这是前端最好的时代, 这也是前端最坏的时代。 众多前端框架满天飞,随着 jQuery 在前端行业的慢慢弱化,总是会有一种斯人远去,何者慰籍的感觉。互勉吧,各位。

另推荐个表格组件gridManager

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
Javascript 继承机制实例
Aug 12 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
php结合js实现多条件组合查询
May 28 #Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 #Javascript
js 将线性数据转为树形的示例代码
May 28 #Javascript
React中使用外部样式的3种方式(小结)
May 28 #Javascript
vue实现多条件和模糊搜索功能
May 28 #Javascript
vue实现路由切换改变title功能
May 28 #Javascript
Vue 无限滚动加载指令实现方法
May 28 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
js数组操作学习总结
2013/11/04 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
js判断节假日实例代码
2017/12/27 Javascript
layui表格数据重载
2019/07/27 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python global和nonlocal用法解析
2020/02/03 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
新闻编辑专业自荐信
2014/07/02 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript