关于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 相关文章推荐
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
php抽象类用法实例分析
2015/07/07 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
Django Rest framework频率原理与限制
2019/07/26 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
python-地图可视化组件folium的操作
2020/12/14 Python
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
工厂实习感言
2014/01/14 职场文书
工会工作先进事迹
2014/08/18 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers