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及其用法的更多相关文章

  1. 深度理解return具体用法

    ''' 下面我们来更加深度的理解return具体用法!!! return 默认返回None return 可以返回任意数据类型的数据 return 返回多个值的时候,会以元祖的形式把多个值包在一起 ' ...

  2. 2个简单实例让你快速理解try-catch的用法

    相信在实际项目中,你可能经常会看到类似下面的代码 try { // 尝试执行代码块 } catch(err) { // 捕获错误的代码块 } finally { // 结果如何都会执行的代码块 } 简 ...

  3. MVC ---- 理解学习Func用法

    //Func用法 public static class FuncDemo{ public static void TestFunc(){ //数据源 List<User> usList ...

  4. pytorch Dataset Dataloader用法（一个示例）

    from torch.utils.data import Dataset from torch.utils.data import DataLoader from torch.utils.data i ...

  5. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  6. 理解Condition的用法

    这个示例中BoundedBuffer是一个固定长度的集合,这个在其put操作时,如果发现长度已经达到最大长度,那么会等待notFull信号,如果得到notFull信号会像集合中添加元素,并发出notE ...

  7. Vuex之理解Getters的用法

    一.什么是getters在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用 ...

  8. java基础篇之理解synchronized的用法

    Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this ...

  9. Android-一张图理解MVP的用法

    M和V通过P交互,M做了两件事,开启子线程做耗时操作,然后使用原生的Hander方式切回主线程回调结果给P. M做的两件事也可以使用比较流行的rxjava实现: 备注:图片不清晰可以看这里

随机推荐

  1. 【bzoj3289】Mato的文件管理 离散化+莫队算法+树状数组

    原文地址:http://www.cnblogs.com/GXZlegend/p/6805224.html 题目描述 Mato同学从各路神犇以各种方式(你们懂的)收集了许多资料,这些资料一共有n份,每份 ...

  2. axis2实践（二）Restful入门示例

    1. 实例说明 本示例直接参照了RESTful Web Services with Apache Axis2,本示例基本就是沿用的原示例,就是一个对学生信息(包括姓名,年龄,课程)的管理的例子,提供如 ...

  3. BZOJ 2653 middle | 主席树

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=2653 题解: 设答案为ans,把大于等于ans的记为1,小于的记为-1,这样可以知道当前an ...

  4. The UVALIVE 7716 二维区间第k小

    The UVALIVE 7716 二维区间第k小 /** 题意:给一个n * n的矩阵,有q个查询 每次查询r,c,s,k表示已(r,c)为右上角 大小为s的正方形中 第k小的元素 n <= 2 ...

  5. BZOJ1017 [JSOI2008]魔兽地图DotR 【树形dp + 背包dp】

    题目链接 BZOJ1017 题解 orz hzwer 树形dp神题 设\(f[i][j][k]\)表示\(i\)号物品恰好花费\(k\)金币,并将\(j\)个物品贡献给父亲的合成时的最大收益 计算\( ...

  6. Tomcat学习笔记(十一)

    StandardContext类  Context实例代表着一个具体的web应用程序,其中包含一个或者多个Wrapper实例,每个Wrapper实例代表着具体的servlet定义.但是,Context ...

  7. 《c程序设计语言》-3.1 判断语句多少影响时间

    #include <stdio.h> #define Num 1000000 /* int binsearch(int x,int v[],int n) { int low,high,mi ...

  8. mdadm使用详解

    ★mdadm是multiple devices admin的简称,它是Linux下的一款标准的软件 RAID 管理工具,作者是Neil Brown 我们知道raidtools是Linux下一款经典的用 ...

  9. 编写Shell脚本的最佳实践，规范二

    需要养成的习惯如下: 代码有注释 #!/bin/bash # Written by steven # Name: mysqldump.sh # Version: v1.0 # Parameters : ...

  10. Webpack & The Hot Module Replacement热模块替换原理解析

    Webpack & The Hot Module Replacement热模块替换原理解析 The Hot Module Replacement(HMR)俗称热模块替换.主要用来当代码产生变化 ...