关于javascript中dataset的问题小结


Posted in Javascript onNovember 16, 2015

DataSet是ADO.NET的中心概念。可以把DataSet当成内存中的数据库,DataSet是不依赖于数据库的独立数据集合。所谓独立,就是说,即使断开数据链路,或者关闭数据库,DataSet依然是可用的,DataSet在内部是用XML来描述数据的,由于XML是一种与平台无关、与语言无关的数据描述语言,而且可以描述复杂关系的数据,比如父子关系的数据,所以DataSet实际上可以容纳具有复杂关系的数据,而且不再依赖于数据库链路。

一.关于dataset

1.html5自定义属性及基础

html5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相应的id:

<a href="javascript:;" data-id="2312">测试</a>

这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用css属性选择器进行样式设置.数量不受限制,在控制和渲染数据的时候提供了非常强大的控制.

下面是元素应用data属性的一个例子:

<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>

要想获取某个属性的值,可以像下面这样使用dataset对象:

var expenseday=document.getElementById('day-meal-expense');
  var typeOfDrink=expenseday.dataset.drink;
  console.log(typeOfDrink);//tea
  console.log(expenseday.dataset.food);//noodle
  console.log(expenseday.dataset.meal);//lunch

如果浏览器支持dataset,则会弹出注释内容,如果浏览器不支持dataset则会报错,无法获取属性drink/food/meal的值:对象为null或未定义(如IE9版本).

data属性基本上所有的浏览器都是支持的,但是dataset对象支持的就比较特殊了,目前仅在Opera 11.1+,Chrome 9+下可以通过javascript,使用dataset访问你自定义的data属性.至于其他浏览器,FireFox 6+(未出)以及Safari 6+(未出)会支持dataset对象,至于IE浏览器,目前看来还是遥遥无期的趋势.

需要注意的是带边字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor.例如,上面的例子中现有如下data属性,data-meal-time,则我们要获取相应的值可以使用:expenseday.dataset.mealTime

2.为何要使用dataset

如果使用传统的方法获取属性值应该会类似下面:

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
现在,如果我们要获得多个自定义的属性值,就要用下面N行代码来实现了:

var attrs=expenseday.attributes, expense={},i,j;
for (i=0,j=attrs.length;i<j;i++){
  if(attrs[i].name.substring(0,5)=='data-'){
    expense[attrs[i].name.substring(5)]=attrs[i].value;
  }
}

而使用dataset属性,我们根本不需要任何循环去获取你想要的那个值,直接秒杀:

expense=document.getElementById('day-meal-expense').dataset;
dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量.

3.dataset的操作

可以像下面这样操作名-值对:

charInput=[];
  for(var item in expenseday){
    charInput.push(expenseday[item]);
  }

上面这几千代码的作用是让所有的自定义属性塞到一个数组中.

如果你想删除一个data属性,可以这么做:

delete expenseday.dataset.meal;
  console.log(expenseday.dataset.meal)//undefined

如果你想给元素添加一个属性,可以这么做:

expenseday.dataset.dessert='icecream';
  console.log(expenseday.dataset.dessert);//icecream

4.跟getAttribute相比的速度

使用dataset操作data要比使用getAttribute稍微慢些.

但是,如果我们只是处理少量的data数据,这种速度上的差异造成的影响是基本上没有的.反而,我们应该看到,使用dataset操作自适应属性要比其他类似getAttribute的形式要少很多让人头疼的麻烦,并且更具有可读性.因此,权衡来看,操作自定义属性,dataset操作是上选.

5.什么地方使用dataset

每次你使用自定义data属性的时候,使用dataset去获取名-值对就是个不错的选择.考虑到现在很多浏览器还是把dataset当作不认识的外星生物看待,所以,在实际使用的时候,有必要进行一下特征检测,看看是否支持dataset,类似下面的使用:

if(expenseday.dataset){
    expenseday.dataset.dessert='icecream';
  }else{
    expenseday.setAttribute('data-dessert','icecream');
  }

注意:如果你的应用程序会频繁更新data属性,建议使用JavaScript对象进行数据管理,而不是每次都经由data属性进行更新.

二.关于字面量赋值,数组赋值

var a=1,b=2;
var c=[a,b];
console.log(c);//[1,2]
var b=3;
console.log(c);//[1,2]
var c=[a,b];
console.log(c);//[1,3]

上面赋给a,b的值都是数字,c是由a和b组成的数组,由于a,b的值就是1和2,所以var c=[a,b]就等于var c=[1,2];之后a和b的值再怎么改变变与c=[1,2]无关了.

以上内容是关于javascript中dataset的问题小结,希望对大家学习有所帮助。

Javascript 相关文章推荐
jquery获取input表单值的代码
Apr 19 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
javascript入门教程基础篇
Nov 16 #Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 #Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 #Javascript
javascript 中的 delete及delete运算符
Nov 15 #Javascript
详解JavaScript函数对象
Nov 15 #Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 #Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 #Javascript
You might like
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
实现PHP搜索加分页
2016/10/12 PHP
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python 读取文件并替换字段的实例
2018/07/12 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
经营场所证明范本
2015/06/19 职场文书
国庆节新闻稿
2015/07/17 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
详解Redis主从复制实践
2021/05/19 Redis
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python