A summary of the problems with the dataset in JavaScript _javascript tips

A dataset is the central concept of ado.net. You can think of a dataset as a database in memory, a dataset that 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 used in XML to describe the data, because XML is a platform-independent, language-independent data Description language, and can describe the complex relationship of data, such as parent-child relationship data, so the dataset can actually accommodate data with complex relationships and no longer relies on database links.

I. About the DataSet

1.HTML5 Custom Attributes and basics

In HTML5 we can use the data-prefix to set the custom attributes we need to store some data, such as we want to store the corresponding ID on a text button:

Copy Code code as follows:

<a href= "javascript:;" data-id= "2312" > Test </a>

The data-prefix here is called the Data property, which can be defined by scripting, or it can be styled by applying the CSS property selector. The quantity is unrestricted, providing very powerful control when controlling and rendering the data.

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

Copy Code code 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:

 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 the dataset, the annotation will pop up, and if the browser does not support the dataset, it will fail to get the value of the property Drink/food/meal: The object is null or undefined (for example, IE9 version).

The Data property is basically supported by all browsers, but the DataSet object supports a special one, which is currently available only through JavaScript under opera 11.1+,chrome 9+, Use the dataset to access your custom data properties. As for other browsers, FireFox 6+ (not out) and Safari 6+ (not out) will support the DataSet object, as for IE browser, it still seems to be a distant trend.

Note that the name of the concatenated character connection needs to be named for the camel, that is, the combination of the case, which is similar to the style object of the applied element, Dom.style.borderColor. For example, the following Data property is available in the example above. Data-meal-time, then we want to get the corresponding value can be used: expenseday.dataset.mealTime

2. Why to use DataSet

If you use a traditional method to get a property value, it should look like this:

var Typeofdrink=document.getelementbyid (' Day-meal-expense '). getattribute (' Data-drink ');
Now, if we want to get more than one custom attribute value, we need to implement it with the following n lines of code:

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

and using the DataSet attribute, we don't need any loops to get the value you want, just the second kill:

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

3.dataset of Operation

You can manipulate name-value pairs as follows:

Charinput=[];
  For (var item in expenseday) {
    charinput.push (Expenseday[item]);
  }

The thousands of code above is for all custom attributes to be stuffed into an array.

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

Delete expenseday.dataset.meal;
  Console.log (expenseday.dataset.meal)//undefined

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

expenseday.dataset.dessert= ' icecream ';
  Console.log (Expenseday.dataset.dessert);//icecream

4. Speed compared with getattribute

Using a dataset to manipulate data is a bit slower than using getattribute.

However, if we are only dealing with a small amount of data, the impact of this difference in speed is basically not there. Instead, we should see that using a dataset to manipulate adaptive properties is a lot less troublesome than other forms of getattribute. and more readable. Therefore, the tradeoff is to manipulate the custom attributes, the dataset operation is on the election.

5. Where to use dataset

Each time you use a custom data attribute, using a dataset to get a name-value pair is a good choice. Given that many browsers now regard datasets as alien creatures that are not known, it is necessary, in practice, to perform feature detection, See if the dataset is supported, similar to the following:

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 a JavaScript object to manage it instead of updating it every time through the Data property.

Two. For literal assignment, an array is assigned a value

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

The values assigned to A,B are numbers, C is an array of a and B, because the A,b value is 1 and 2, so var c=[a,b] equals var c=[1,2, and then the value of a and B changes to c=[1,2.

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