关于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 相关文章推荐
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python pygame实现球球大作战
2019/11/25 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
纠风工作实施方案
2014/03/15 职场文书
施工安全汇报材料
2014/08/17 职场文书
同志主要表现材料
2014/08/21 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
嘉宾邀请函
2015/01/31 职场文书
捐书活动倡议书
2015/04/27 职场文书
百年孤独读书笔记
2015/06/29 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle