关于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的问题小结，希望对大家学习有所帮助。

时间： 2024-10-09 22:37:08

关于javascript中dataset的问题小结的相关文章

关于JavaScript中toSource问题的小结

今天在一篇关于内建类的博文中,讲到了Boolean类,其对象有一个toSource()方法:返回表示对象源代码的字符串.由于学的浅,测试时,出现了不同的结果: var b = new Boolean(""); document.write("b的值是:"+b+"<br/>"); document.write("b的原始值是:"+b.valueOf()+"<br/>"); docume

JavaScript中null和undefined小结

一. 前言 因为对javascript中的null和undefined有些分不清楚,因此在试验之后进行一下小结. 二. 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title>

Javascript 中的 &amp;&amp; 和 || 使用小结

准备两个对象用于下面的讨论 var alice = { name: "alice", toString: function () { return this.name; } } var smith = { name: "smith", toString: function () { return this.name; } } 在 javascript 中,对于 && 不仅仅可以用于 boolean 类型,也不仅仅返回 Boolean 类型的结果. l

JavaScript中的字符串使用小结

1 <script type="text/javascript"> 2 3 //length属性:获取字符串的字符个数.(无论中文字符还是英文字符都算1个字符.) 4 var msg = '我是Jk'; 5 alert(msg.length); 6 7 8 9 //charAt(index)方法:获取指定索引位置的字符.(索引从0开始) 10 var msg = '作为程序员,只有默默地多撸代码,方可走的更远!'; 11 alert(msg.charAt(8)); //根据

关于javascript中的dataset

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

JavaScript中对象类型的转换小结

对象到字符串和对象到数字类型的转换涉及到两个重要的方法,最终的转换结果会受到这两个方法返回结果的影响,这两个方法就是toString和valueOf.所有的对象都会从Object对象中继承到这两个方法.toString方法 用于返回对象的字符串表示(但是其实也可以不返回字符串).对于默认从Object继承而来的toString方法并不会返回太多有意义的内容.而valueOf方法目的是返回一个可以表示对象的原始类型值,但是由于对象的复杂性,大多数情况下根本不可能用一个原始类型值来表示,所以默认的v

javascript中闭包的原理与用法小结（转）

一.在javaScript中闭包的五种表现形式如下: 1 /** 2 * Created by admin on 2016/12/26. 3 *//* 4 //向函数对象添加属性 5 function Circle(r){ 6 this.r=r; 7 } 8 Circle.prototype.PI=3.1415926; 9 Circle.prototype.area=function(){ 10 return this.PI*this.r*this.r; 11 }; 12 var c=new C

分析javascript中作用域

1.javascript中的作用域 正如其他语言一样,在javascript中,变量的作用域也有全局和局部作用域的划分. 2.全局作用域 1)所有在最外层定义(非函数体内定义)的变量拥有全局作用域 2)直接赋值的变量,自动默认为全局作用域 <span style="font-size:18px;"> <script> //函数体外 var name = "第一个name"; //全局变量 sex = "女"; //全局变量

理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();

原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如