关于javascript中的dataset

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对象:

?

1 2 3 4 5

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行代码来实现了:

?

1 2 3 4 5 6

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的操做

能够像下面这样操做名-值对:

?

1 2 3 4

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

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

若是你想删除一个data属性,能够这么作:

?

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

若是你想给元素添加一个属性,能够这么作:

?

1 2	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,相似下面的使用:

?

1 2 3 4 5

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

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

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

?

1 2 3 4 5 6 7

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的问题小结，但愿对你们学习有所帮助。