About datasets in JavaScript

The dataset is the central concept of ADO. Datasets can be treated as an in-memory database, which is a separate collection of data that is not dependent on the database. The so-called independence, that is, even if the data link is disconnected, or shut down the database, the dataset is still available, the dataset is internally XML to describe the data, because XML is a platform-independent, language-independent data Description language, and can describe the complex relationship of data, For example, the data for a parent-child relationship, so the dataset can actually accommodate data with complex relationships and is no longer dependent on the database link.

I. About the DataSet

1.HTML5 Custom Attributes and basics

HTML5 we can use the data-prefix to set the custom properties we need to do some data storage, for example, we want to store the corresponding ID on a text button:

Copy CodeThe code is as follows:
<a href= "javascript:;" data-id= "2312" > Test </a>

The data-prefix is referred to as the Data property, which can be defined by scripting, or it can be styled using CSS property selectors. The number is unrestricted, providing very strong control when controlling and rendering data.

The following is an example of an element applying the Data property:

Copy CodeThe code is as follows:
<div id= "Day-meal-expense" data-drink= "tea" data-food= "noodle" data-meal= "Lunch" >$18.3</div>

To get the value of a property, you can use the DataSet object as follows:

?

12345

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

If the browser supports a dataset, the comment pops up, and if the browser does not support a dataset, an error occurs and the value of the property drink/food/meal cannot be obtained: The object is null or undefined (such as the IE9 version).

The Data property is basically supported by all browsers, but the DataSet object supports it more specifically, and is now available only in Opera 11.1+,chrome + + via JavaScript, Use a dataset to access your custom data property. For other browsers, FireFox 6+ (not out) and Safari 6+ (not out) will support the DataSet object, as for Internet Explorer, it still seems to be a distant trend.

It is important to note that the name with the edge character connection needs to be named Hump when it is used, that is, the combination of casing and writing, which is similar to the style object of the applied element, Dom.style.borderColor. For example, the following Data property is present in the example above. Data-meal-time, then we want to get the corresponding value can be used: expenseday.dataset.mealTime

2. Why use a DataSet

If you use the traditional method to get the property value it should look similar to the following:

var Typeofdrink=document.getelementbyid (' Day-meal-expense '). getattribute (' Data-drink ');
Now, if we're going to get multiple custom attribute values, we're going to use the following n lines of code:

?

123456

varattrs=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;  }}

With the DataSet attribute, we don't need any loops to get the value you want, just kill it:

Expense=document.getelementbyid (' Day-meal-expense '). DataSet;
The dataset is not a typical JavaScript object, but rather a Domstringmap object, and Domstringmap is HTML5 a new interactive variable that contains multiple name-value pairs.

Operation of 3.dataset

You can manipulate name-value pairs like this:

?

1234	charInput=[];  for(varitem inexpenseday){    charInput.push(expenseday[item]);  }

The purpose of the above thousands of code is to have all the custom attributes plugged into an array.

If you want to delete a data property, you can do this:

?

12	deleteexpenseday.dataset.meal;  console.log(expenseday.dataset.meal)//undefined

If you want to add an attribute to an element, you can do this:

?

12	expenseday.dataset.dessert=‘icecream‘;  console.log(expenseday.dataset.dessert);//icecream

4. Speed compared to GetAttribute

Using datasets to manipulate data is slightly slower than using getattribute.

However, if we just deal with a small amount of data, the impact of this difference in speed is basically not. Instead, we should see that using datasets to manipulate adaptive properties is a lot less troublesome than other getattribute-like forms, and more readable. Therefore, the tradeoff is that manipulating custom properties, the dataset operation is an election.

5. Where to use the dataset

Every time you use a custom data property, it's a good idea to use a dataset to get a name-value pair. Considering that many browsers still treat datasets as an alien creature they don't know, it is necessary to perform feature detection when actually using it. See if the dataset is supported, similar to the following use:

?

12345

if(expenseday.dataset){    expenseday.dataset.dessert=‘icecream‘;  }else{    expenseday.setAttribute(‘data-dessert‘,‘icecream‘);  }

Note: If your application updates the Data property frequently, it is recommended that you use JavaScript objects to manage your information, rather than updating it each time through the database property.

Two. About literal assignment, array assignment

?

1234567

vara=1,b=2;var c=[a,b];console.log(c);//[1,2]var b=3;console.log(c);//[1,2]varc=[a,b];console.log(c);//[1,3]

The value assigned to a, a, B is a number, C is an array of a and a, because the value of a B is 1 and 2, so var c=[a,b] is equal to Var c=[1,2], after which the value of a and B is changed to c=[1,2] irrelevant.

The above is a summary of the problem of the dataset in JavaScript, hoping to help you learn.

About datasets in JavaScript