深⼊理解dataset及其⽤法
  DataSet是ADO.NET的中⼼概念。可以把DataSet当成内存中的数据库，DataSet是不依赖于数据库的独⽴数据集合。所谓独⽴，就是说，即使断开数据链路，或者关闭数据库，DataSet依然是可⽤的，DataSet在内部是⽤XML来描述数据的，由于XML是⼀种与平台⽆关、与语⾔⽆关的数据描述语⾔，⽽且可以描述复杂关系的数据，⽐如⽗⼦关系的数据，所以DataSet实际上可以容纳具有复杂关系的数据，⽽且不再依赖于数据库链路。
1、html5⾃定义属性及基础
  html5中我们可以使⽤data-前缀设置我们需要的⾃定义属性，来进⾏⼀些数据的存放，例如我们要在⼀个⽂字按钮上存放相应的id：
<a href="javascript:;" data-id="2312">测试</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 ElementById('day-meal-expense');
var typeOfDrink=expenseday.dataset.drink;
console.log(typeOfDrink);//tea
console.log(expenseday.dataset.food);//noodle
console.log(al);//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，则我们要获取相应的值可以使
⽤：alTime
2.、为何要使⽤dataset
  如果使⽤传统的⽅法获取属性值应该会类似下⾯：
var typeOfDrink = ElementById('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属性，我们根本不需要任何循环去获取你想要的那个值，直接⼀⾏秒杀：
ElementById('day-meal-expense').dataset;
  dataset并不是典型意义上的JavaScript对象，⽽是个DOMStringMap对象。DOMStringMap是HTML5⼀种新的含有多个名-值对的交互变量。
3、dataset的操作：
  可以像下⾯这样操作名-值对：
charInput=[];
for(var item in expenseday){
charInput.push(expenseday[item]);
}
  上⾯这⼏千代码的作⽤是让所有的⾃定义属性塞到⼀个数组中。如果你想删除⼀个data属性，可以这么做：
delete al;
console.log(al)//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，也可以⾃⾏定义提⽰⽅式）
⽤户可以点击表格列中的“删除”按钮，删掉那⼀⾏的数据。
typeof的用法
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</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刷新页⾯，不过因为要考虑到后⾯的删除功能，所以在渲染表格的时候考虑⽤和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绑定删除事件：
  if(LowerCase ==='button'){
  　delHandle.call(null,event.target.dataset.city);
  }
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。