关于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 学习笔记(十六) js事件
Feb 01 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
jQuery Ajax全解析
Feb 13 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
浅析TypeScript 命名空间
Mar 19 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生成Android客户端扫描可登录的二维码
2016/05/13 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python生成pdf文件的方法
2014/08/04 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
python 判断网络连通的实现方法
2018/04/22 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
python 模块导入问题汇总
2021/02/01 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
Java的类与C++的类有什么不同
2014/01/18 面试题
幼儿园园长岗位职责
2013/11/26 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript