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. 【bzoj3144】[Hnoi2013]切糕 网络流最小割

    题目描述 输入 第一行是三个正整数P,Q,R,表示切糕的长P. 宽Q.高R.第二行有一个非负整数D,表示光滑性要求.接下来是R个P行Q列的矩阵,第z个 矩阵的第x行第y列是v(x,y,z) (1≤x≤ ...

  2. [zoj] 1937 [poj] 2248 Addition Chains || ID-DFS

    原题 给出数n,求出1......n 一串数,其中每个数字分解的两个加数都在这个序列中(除了1,两个加数可以相同),要求这个序列最短. ++m,dfs得到即可.并且事实上不需要提前打好表,直接输出就可 ...

  3. BZOJ2957 楼房重建 【线段树】

    题目 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题,我们考虑这些事件发生在一个二维 ...

  4. Iterator pattern 及其在java API中的运用

    1.问题: 当我们看到java中的Collection,List,Set,Map等集合类时都可以用Iterator进行遍历元素时,我们是否感到很神奇.我们不禁要问java是如何实现这一目标的.这就是我 ...

  5. Java不需要加载整张图片而获取图片的大小

    转载地址 http://blog.jdk5.com/zh/java-get-image-size-without-loading-the-whole-data/ 利用Java类,获取图片的类型,宽度和 ...

  6. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

  7. UVA 104 Arbitrage

    动态规划类似FLOYD dp[i][j][k] 表示第i个点经过K次到达j点能获得的最大利润 #include <map> #include <set> #include &l ...

  8. Javascript 中的 apply与call详解

    一.方法定义 1.call 方法 语法:call(thisObj,arg1, arg2, argN) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选 ...

  9. 理解Java垃圾回收

    stop-the-world 原文链接:http://www.cubrid.org/blog/de... 了解Java的垃圾回收(GC)原理能给我们带来什么好处?对于软件工程师来说,满足技术好奇心可算 ...

  10. HDU 2955 【01背包/小数/概率DP】

    Robberies Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...