深入理解dataset及其用法

古兰精 古兰精     2022-09-30     226

关键词:

  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 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=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属性进行更新。

6、实例分析:

任务描述: 
参考以下示例代码,用户输入城市名称和空气质量指数后,点击“确认添加”按钮后,就会将用户的输入在进行验证后,添加到下面的表格中,新增一行进行显示 
用户输入的城市名必须为中英文字符,空气质量指数必须为整数 
用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理(trim) 
用户输入不合规格时,需要给出提示(允许用alert,也可以自行定义提示方式) 
用户可以点击表格列中的“删除”按钮,删掉那一行的数据。

<!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刷新页面,不过因为要考虑到后面的删除功能,所以在渲染表格的时候考虑用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);
  }
})

 

深入理解:linearregression及其正则方法

  这是最近看到的一个平时一直忽略但深入研究后发现这里面的门道还是很多,LinearRegression及其正则方法(主要是Lasso,Ridge,ElasticNet)这一套理论的建立花了很长一段时间,是很多很多人的论文一点点堆起来的一套理论体系.如果你... 查看详情

深入理解伙伴算法及其改进

...伙伴算法的优缺点详细给我讲了一下,发现这个算法值得深入研究一波~看了很多资料,下面整理资料,然后谈谈自己的理解。 体会  Linux操作系统主要的内存分配算法是伙伴系统(Buddy算法),机制是按照2的幂次方进行分... 查看详情

深入理解正则表达式环视的概念与用法

在《深入理解正则表达式高级教程-环视》中已经对环视做了简单的介绍,但是,可能还有一些读者比较迷惑,今天特意以专题的形式,深入探讨一下正则表达式的环视的概念与用法。 深入理解正则表达式环视的概念与用法... 查看详情

深入理解mybatis的原理:配置文件用法(续)

前言:前文讲解了MyBatis的配置文件一部分用法,本文将继续讲解MyBatis的配置文件的用法。目录1、typeHandler类型处理器2、ObjectFactory3、插件4、environments配置环境5、databaseIdProvider数据库厂商标识6、引入映射器的方法1、typeHandler类... 查看详情

深入理解公式{1,0}的用法

一、从右往走进行VLOOKUP查找KT002叫什么名字公式:VLOOKUP("KT002",IF({1,0},$H$7:$H$10,$G$7:$G$10),2,FALSE)公式解释二、多条件查询根据“郭靖男”,查询出对应的年龄公式:VLOOKUP("郭靖男",IF({1,0},G7:G10&I7:I10,J7:J10),2,FALSE)在这个公式中,IF({1,... 查看详情

c语言的罗盘——指针!深入理解c语言指针及其应用(代码片段)

...;字符串库函数和指针等内容,在这篇文章我们将继续深入了解有关字符串库函数和指针的探索。📒博客主页:https://blog.csdn.net/m0 查看详情

深入理解jni

深入理解JNI本章主要内容·?通过一个实例,介绍JNI技术和在使用中应注意的问题。本章涉及的源代码文件名称及位置以下是本章分析的源代码文件名称及其位置。·?MediaScanner.javaframework/base/media/java/src/android/media/MediaScanner.java·?and... 查看详情

promise对象深入理解(代码片段)

 目录基本用法返回另一个Promise实例Promise.prototypeof.then Promise.prototype.catch Promise.prototype.finally() Promise.resolve()Promsie.reject()Promise的执行顺序 基本用法Promise对象是一个构造函数,下面的例子生成一个p 查看详情

git学习深入理解gitreset命令

重置命令(gitreset)是Git最常用的命令之一,也是最危险最容易误用的命令。来看看gitreset命令用法。-----------------------------------------------------------------------------------------------------------用法一:gitreset[-q] [<commit>][--]<paths... 查看详情

深入理解tcp协议及其源代码

深入理解TCP协议及其源代码前言在前面实验我们分别实现了Socket通信工具,探讨了SocketAPI、Socket调用原理等。但是还没有针对某一实例进行讲解,在本实验我们将针对TCP协议进行详细分析,期待在Linux内核进行分析TCP原理。1.Tcp... 查看详情

c#中的object类深入理解!最好给实例!及其转换!

可以形象点吗?楼主,object类是所有对象的基类.其实MSDN就有好多关于它的解释了,我给一个链接你去看一下吧链接:http://msdn.microsoft.com/zh-cn/library/system.object(VS.80).aspx我在网上也找了一些讲解的,觉得它讲解得还不错,希望对你有用啦C#... 查看详情

深入理解jsp

 JSP(Javaserverpage)是JavaEE规范最基本成员,他是JavaWeb开发的重点知识,尽管我们一直在用。但其原理知之甚少。今天重点研究一些JSP核心内容以及其工作原理。 JSP和Servlet的本质是一样的,由于JSP终于须要编译成Servlet才... 查看详情

深入理解input中的valuenameid的区别和用法——web前端自学笔记(代码片段)

value:指该控件显示出来的值,是面向用户的。如<inputtype="button"value="123">这条语句运行出来时,button按钮上显示的数值就是123;name:指一类控件的名称,可以重复。如<inputtype=&#... 查看详情

深入理解tcp协议及其源代码(代码片段)

...上的内核中进行。通过理论分析、源代码阅读和运行跟踪深入理解TCP协议connect及bind、listen、accept背后的三次握手。 Socketsocket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,都可以用“打开open–>读... 查看详情

转深入理解java内存模型

...,及其与处理器内存模型和顺序一致性内存模型的关系。深入理解java内存模型(一)——基础深入 查看详情

深入理解tcp协议及其源代码

Socket  在计算机通信领域,socket被翻译为“套接字”,它是计算机之间进行通信的一种约定或一种方式。通过socket这种约定,一台计算机可以接收其他计算机的数据,也可以向其他计算机发送数据。socket起源于Unix,而Uni... 查看详情

深入剖析java并发之阻塞队列linkedblockingqueue与arrayblockingqueue

关联文章:深入理解Java类型信息(Class对象)与反射机制深入理解Java枚举类型(enum)深入理解Java注解类型(@Annotation)深入理解Java类加载器(ClassLoader)深入理解Java并发之synchronized实现原理Java并发编程-无锁CAS与Unsafe类及其并发包Atomic深... 查看详情

深入理解tcp协议及其源代码(代码片段)

一、三次握手过程  在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。如下图所示:    首先,客户端开始的时候,首先创建sock文件描述符,接着就进行connect发起连接服务器请求,阻塞等待... 查看详情