深入理解dataset及其用法
DataSet是ADO.NET的中心概念。可以把DataSet当成内存中的数据库，DataSet是不依赖于数据库的独立数据集合。所谓独立， 就是说，即使断开数据链路，或者关闭数据库，DataSet依然是可用的，DataSet在内部是用XML来描述数据的，由于XML是一种与平台无关、与 语言无关的数据描述语言，而且可以描述复杂关系的数据，比如父子关系的数据，所以DataSet实际上可以容纳具有复杂关系的数据，而且不再依赖于数据库 链路。
1、html5自定义属性及基础
html5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相应的id：
<a href="javascript:;" data-id="">测试</a>
这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用css属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。
下面是元素应用data属性的一个例子：
<html>
<head></head>
<body>
<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>
<script>
//要想获取某个属性的值,可以像下面这样使用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
</script>
</body>
</html>
如果浏览器支持dataset，则会弹出注释内容；如果浏览器不支持dataset则会报错：无法获取属性drink/food/meal的值：对象为null或未定义(如IE9版本).。
data属性基本上所有的浏览器都是支持的，但是dataset对象支持的就比较特殊了，目前仅在Opera 11.1+、Chrome 9+下可以通过javascript使用dataset访问你自定义的data属性。
需要注意的是带边字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的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=,j=attrs.length;i<j;i++){
if(attrs[i].name.substring(,)=='data-'){
expense[attrs[i].name.substring()]=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属性进行更新。
6、实例分析：
任务描述：
参考以下示例代码，用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示
用户输入的城市名必须为中英文字符，空气质量指数必须为整数
用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）
用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）
用户可以点击表格列中的“删除”按钮，删掉那一行的数据。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task </title>
<script src="task.js"></script>
</head>
<body>
<div>
<label>城市名称：<input id="aqi-city-input" type="text"></label><br>
<label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">确认添加</button>
</div>
<table id="aqi-table">
<!--
<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>
<tr><td>北京</td><td>90</td><td><button>删除</button></td></tr>
<tr><td>北京</td><td>90</td><td><button>删除</button></td></tr>
-->
</table>
</body>
</html>/**
* aqiData，存储用户输入的空气指数数据
* 示例格式：
* aqiData = {
* "北京": 90,
* "上海": 40
* };
*/
var aqiData = {}; /**
* 从用户输入中获取数据，向aqiData中增加一条数据
* 然后渲染aqi-list列表，增加新增的数据
*/
function addAqiData() { } /**
* 渲染aqi-table表格
*/
function renderAqiList() { } /**
* 点击add-btn时的处理逻辑
* 获取用户输入，更新数据，并进行页面呈现的更新
*/
function addBtnHandle() {
addAqiData();
renderAqiList();
} /**
* 点击各个删除按钮的时候的处理逻辑
* 获取哪个城市数据被删，删除数据，更新表格显示
*/
function delBtnHandle() {
// do sth.
renderAqiList();
} function init() {
// 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
// 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
} init();
从任务描述来看，就是用js操控html中的表格和表单实现增加和删除的功能。没动手写之前大概过一下思路，就是遍历数组的属性，然后 innerHTML刷新页面，不过因为要考虑到后面的删除功能，所以在渲染表格的时候考虑用appendChild.tr和td，那么在删除的时候就可以 用removeChild。不过觉得代码量会比较多，很麻烦。
采用dataset的方法，删除就实现的特别简单，代码精简。
（1）在添加button的时候为其增加一个属性data-city:’”+city+”’，
item.innerHTML += "<tr><td>" + city + "</td><td>" + aqiData[city] + "</td><td><button data-city ='"+city+"'>删除</button></td></tr>";
（2）之后在点击删除按钮的时候调用的函数：
function delHandle(){
delete aqiData[city];
//表格刷新
（3）给表格里面的button绑定删除事件：
document.getElementById("aqi-table").addEventListener("cilck",function(event){
if(event.target.nodeName.toLowerCase ==='button'){
delHandle.call(null,event.target.dataset.city);
}
})
深入理解dataset及其用法的更多相关文章
- 深度理解return具体用法
''' 下面我们来更加深度的理解return具体用法!!! return 默认返回None return 可以返回任意数据类型的数据 return 返回多个值的时候,会以元祖的形式把多个值包在一起 ' ...
- 2个简单实例让你快速理解try-catch的用法
相信在实际项目中,你可能经常会看到类似下面的代码 try { // 尝试执行代码块 } catch(err) { // 捕获错误的代码块 } finally { // 结果如何都会执行的代码块 } 简 ...
- MVC ---- 理解学习Func用法
//Func用法 public static class FuncDemo{ public static void TestFunc(){ //数据源 List<User> usList ...
- pytorch Dataset Dataloader用法（一个示例）
from torch.utils.data import Dataset from torch.utils.data import DataLoader from torch.utils.data i ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- 理解Condition的用法
这个示例中BoundedBuffer是一个固定长度的集合,这个在其put操作时,如果发现长度已经达到最大长度,那么会等待notFull信号,如果得到notFull信号会像集合中添加元素,并发出notE ...
- Vuex之理解Getters的用法
一.什么是getters在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用 ...
- java基础篇之理解synchronized的用法
Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this ...
- Android-一张图理解MVP的用法
M和V通过P交互,M做了两件事,开启子线程做耗时操作,然后使用原生的Hander方式切回主线程回调结果给P. M做的两件事也可以使用比较流行的rxjava实现: 备注:图片不清晰可以看这里
随机推荐
- 《R语言实战》读书笔记--第三章 图形初阶（二）
3.4添加文本.自定义坐标轴和图例 很多作图函数可以设置坐标轴和文本标注.比如标题.副标题.坐标轴标签.坐标轴范围等.需要注意的是并不是所有的绘图函数都有上述的参数,需要进行验证.可以将一些默认的参数 ...
- 2016华中农业大学预赛 E 想法题
Problem E: Balance Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 205 Solved: 64[Submit][Status][We ...
- 新blog开张！
以后不出意外就只在新的blog更新了! hexo搭建的新blog 然后的然后是继续奋斗!
- Pandas之DataFrame——Part 2
''' [课程2.] 时间模块:datetime datetime模块,主要掌握:datetime.date(), datetime.datetime(), datetime.timedelta() ...
- tortoise git使用 git版本库的rsa key来进行ssh连接
接触git以来 ,开始时用了命令行,但是命令行总归不如图形化菜单方便明了,而GIT本身自带的GUI又用的不习惯,以前用过许久的TOTORISE SVN,幸好有TORTOISE GIT,这个版本图形化工 ...
- NOIP2011提高组
D1T1.铺地毯 for循环 #include<iostream> #include<cstdio> #include<algorithm> using names ...
- glGenTextures
http://blog.sina.com.cn/s/blog_67ede2d80100w3i8.html glGenTextures(GLsizei n, GLuint *textures)函数说明 ...
- 使用bottle进行web开发（2）：http request
我们知道,http request有多个方法,比如get,post,delete,patch,put等.对用的,bottle都定义了相应的装饰器,目前定义了五个: get(),post(),put() ...
- wsgi的学习（1）：什么是WSGI
本文来自:http://www.nowamagic.net/academy/detail/1330310 WSGI,全程是:Web Server Gateway Interface,或者python ...
- HDU 2586.How far away ？-在线LCA(ST)-代码很认真的写了注释(捞到变形)
2018.9.10 0:40 重新敲一遍,然后很认真的写了注释,方便自己和队友看,刚过去的一天的下午打网络赛有一题用到了这个,但是没写注释,队友改板子有点伤,因为我没注释... 以后写博客,代码要写注 ...