关于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 对象的定义方法
Jan 10 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
JavaScript流程控制(分支)
Dec 06 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
公司承诺书格式
2014/05/21 职场文书
服务宗旨标语
2014/07/01 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
仲裁协议书
2014/09/26 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript