Maison > interface Web > js tutoriel > Résumé des problèmes avec l'ensemble de données dans les compétences javascript_javascript

Résumé des problèmes avec l'ensemble de données dans les compétences javascript_javascript

WBOY
Libérer: 2016-05-16 15:32:08
original
1409 Les gens l'ont consulté

DataSet est le concept central d'ADO.NET. Vous pouvez considérer DataSet comme une base de données en mémoire. DataSet est une collection de données indépendante qui ne dépend pas de la base de données. La soi-disant indépendance signifie que même si la liaison de données est déconnectée ou la base de données est fermée, le DataSet est toujours disponible. Le DataSet utilise XML en interne pour décrire les données, car XML est un langage de description de données indépendant de la plate-forme et du langage. , et peut décrire des données ayant des relations complexes, telles que des données de relation parent-enfant, de sorte que DataSet peut réellement prendre en charge des données ayant des relations complexes et ne s'appuie plus sur des liens de base de données.

1. À propos de l'ensemble de données

1.html5 attributs personnalisés et bases

En HTML5, nous pouvons utiliser le préfixe data- pour définir les attributs personnalisés dont nous avons besoin pour stocker certaines données. Par exemple, nous souhaitons stocker l'identifiant correspondant sur un bouton de texte :

.

Copier le code Le code est le suivant :

Le préfixe data- ici est appelé l'attribut data, qui peut être défini via des scripts ou peut être stylisé à l'aide de sélecteurs d'attributs CSS. Le nombre n'est pas limité et fournit un outil très puissant lors du contrôle et du rendu des données.

Ce qui suit est un exemple d'application de l'attribut data à un élément :

Copier le code Le code est le suivant :

18,3 $

Pour obtenir la valeur d'un certain attribut, vous pouvez utiliser l'objet ensemble de données comme suit :

 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
Copier après la connexion

Si le navigateur prend en charge l'ensemble de données, le contenu du commentaire apparaîtra. Si le navigateur ne prend pas en charge l'ensemble de données, une erreur sera signalée et la valeur de l'attribut boisson/nourriture/repas ne pourra pas être obtenue : l'objet est nul ou indéfini. (comme la version IE9).

L'attribut data est essentiellement pris en charge par tous les navigateurs, mais l'objet dataset le prend en charge d'une manière spéciale. Actuellement, vous ne pouvez utiliser l'ensemble de données que pour accéder à votre attribut de données personnalisé via javascript sous Opera 11.1 et Chrome 9. Quant aux autres navigateurs. , FireFox 6 (pas encore publié) et Safari 6 (pas encore publié) prendront en charge l'objet dataset Quant au navigateur IE, il semble que cette tendance soit encore loin

.

Il convient de noter que le nom de la connexion avec des caractères de bordure doit être en casse chameau lorsqu'il est utilisé, c'est-à-dire écrit dans une combinaison de majuscules et de minuscules. Ceci est similaire à l'objet de style de l'élément d'application, dom.style.borderColor. Par exemple, dans l'exemple ci-dessus, il existe les attributs de données suivants, data-meal-time. Si nous voulons obtenir la valeur correspondante, nous pouvons utiliser : dépensesday.dataset.mealTime

.

2. Pourquoi utiliser un ensemble de données

Si vous utilisez la méthode traditionnelle pour obtenir la valeur de l'attribut, elle devrait ressembler à ce qui suit :

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
Maintenant, si nous voulons obtenir plusieurs valeurs d'attributs personnalisés, nous devons utiliser les N lignes de code suivantes pour y parvenir :

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;
  }
}
Copier après la connexion

Avec l'attribut dataset, nous n'avons besoin d'aucune boucle pour obtenir la valeur souhaitée, tuez-la simplement directement :

expense=document.getElementById('day-meal-expense').dataset;
L'ensemble de données n'est pas un objet JavaScript au sens habituel du terme, mais un objet DOMStringMap est une nouvelle variable interactive en HTML5 qui contient plusieurs paires nom-valeur.

3.Opérations sur les ensembles de données

Les paires nom-valeur peuvent être manipulées comme suit :

charInput=[];
  for(var item in expenseday){
    charInput.push(expenseday[item]);
  }
Copier après la connexion

La fonction des quelques milliers de codes ci-dessus est de regrouper tous les attributs personnalisés dans un tableau.

Si vous souhaitez supprimer un attribut de données, vous pouvez faire ceci :

delete expenseday.dataset.meal;
  console.log(expenseday.dataset.meal)//undefined
Copier après la connexion

Si vous souhaitez ajouter un attribut à un élément, vous pouvez faire ceci :

expenseday.dataset.dessert='icecream';
  console.log(expenseday.dataset.dessert);//icecream
Copier après la connexion

4. Vitesse comparée à getAttribute

L'utilisation d'un ensemble de données pour exploiter les données est légèrement plus lente que l'utilisation de getAttribute.

Cependant, si nous ne traitons qu'une petite quantité de données, l'impact de cette différence de vitesse est pratiquement inexistant, nous devrions plutôt voir que l'utilisation d'un ensemble de données pour exploiter des attributs adaptatifs est plus rapide que d'autres formes comme getAttribute. moins de maux de tête et est plus lisible. Par conséquent, dans l’ensemble, lors de l’utilisation d’attributs personnalisés, les opérations sur les ensembles de données sont le meilleur choix

.

5. Où utiliser l'ensemble de données

Chaque fois que vous utilisez un attribut de données personnalisé, c'est un bon choix d'utiliser un ensemble de données pour obtenir des paires nom-valeur étant donné que de nombreux navigateurs traitent encore les ensembles de données comme des créatures extraterrestres inconnues, donc, en utilisation réelle, il est nécessaire de le faire. effectuez une détection de fonctionnalités pour voir si l'ensemble de données est pris en charge, similaire à l'utilisation suivante :

if(expenseday.dataset){
    expenseday.dataset.dessert='icecream';
  }else{
    expenseday.setAttribute('data-dessert','icecream');
  }
Copier après la connexion

注意:如果你的应用程序会频繁更新data属性,建议使用JavaScript对象进行数据管理,而不是每次都经由data属性进行更新.

二.关于字面量赋值,数组赋值

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]
Copier après la connexion

上面赋给a,b的值都是数字,c是由a和b组成的数组,由于a,b的值就是1和2,所以var c=[a,b]就等于var c=[1,2];之后a和b的值再怎么改变变与c=[1,2]无关了.

以上内容是关于javascript中dataset的问题小结,希望对大家学习有所帮助。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal