Explication détaillée de la façon d'obtenir automatiquement les attributs data-* de l'exemple de code HTML5

Une série de balises personnalisées doivent être conçues dans le projet, cela implique donc comment accéder aux attributs des balises. Si vous utilisez l'attribut data-* de HTML5, vous pouvez accéder directement au nom dataset.attribute après avoir obtenu l'élément. Le type d'ensemble de données est DOMStringMap {}, un objet MAP, qui est toujours un objet clé/valeur, ce qui est plus. pratique à utiliser. Cependant, nous avons rencontré un problème de compatibilité, et il n'est pas supporté sur certains anciens navigateurs comme Android 2.3.

Nous pouvons écrire un patch de compatibilité pour cela. Le principe principal est de « détourner » des méthodes telles que document.querySelector/querySelectorAll pour obtenir des éléments, puis de fournir un ensemble de données de champ personnalisé = {....} pour obtenir une écriture standard similaire. Bien sûr, vous pouvez simplement fournir une méthode API comme getDataAttrib() pour obtenir l'attribut, et l'effet sera le même. La raison pour laquelle nous n’adoptons pas cette méthode mais une autre méthode est de mieux nous rapprocher du standard et d’utiliser une méthode d’accès cohérente pour tout le monde.

Mon implémentation est la suivante :

// 如浏览器不支持 HTML5 data-* 属性，设置一个。
;(function(){
	// 测试元素
	var el;
	el = document.createElement('p');
	el.setAttribute('data-id', '111');
	if(!el.dataset){
		Element.prototype.dataset = {};
		
		var querySelectorAll = document.querySelectorAll; // 保存一个
		document.querySelectorAll = function(){
			var resultEls = querySelectorAll.apply(this, arguments);
			for(var resultEl, i = 0, j = resultEls.length; i < j; i++){
				resultEl = resultEls[i];
				resultEl.dataset = getAttrib(resultEl.attributes)
			}
			
			return resultEls;
		}
		
		// 也就是单个的 document.querySelectorAll()。不保存，直接覆盖
		document.querySelector = function(){
			var resultEls = document.querySelectorAll.apply(this, arguments);
			return resultEls ? resultEls[0] : null;
		};	
		
	}
	el = null; // 要完全移除 dummy 元素，是否这样就 ok？
	
	/**
	 * 把元素保存为 JSON 对象
	 * @param {Element.attributes} 元素属性集合
	 * @return {Object}
	 */
    function getAttrib(attributes) {
        if (!attributes) return;
        var hash = {};
        
        for (var attribute, i = 0, j = attributes.length; i < j; i++) {
            attribute = attributes[i];
            if(attribute.nodeName.indexOf(&#39;data-&#39;) != -1){
	            hash[attribute.nodeName.slice(5)] = attribute.nodeValue;
            }
        }
        
        return hash;
    }
})();

Considérant que la méthode d'obtention des éléments de querySelector est suffisante, la méthode documeny.getElementByID("#id") n'est actuellement pas fournie.

Veuillez noter : querySelector /querySelectorAll exécuté sur des objets non-document ne sera pas pris en charge et l'ensemble de données ne sera pas renvoyé. Ce problème a été résolu en réécrivant la méthode Element.prototype le 16/01/2013. Le processus détaillé est le suivant :

if(!canSupportDataSet()){
    Element.prototype.dataset = {};


    modifyQuerySelectorAll_By(document);  // document 的好像不一样……
    modifyQuerySelectorAll_By(Element.prototype);
}


/**
 * 覆盖系统的 querySelector/querySelectorAll 方法。
 * @param host {Element.prototype/Document}
 */
function modifyQuerySelectorAll_By(host){
    var querySelectorAll = host.querySelectorAll; // 保存一个
    host.querySelectorAll = function(){
        var resultEls = querySelectorAll.apply(this, arguments);
        for(var resultEl, i = 0, j = resultEls.length; i < j; i++){
            resultEl = resultEls[i];
            resultEl.dataset = getAttrib(resultEl.attributes)
        }


        return resultEls;
    }


    // 也就是单个的 document.querySelectorAll()。不保存，直接覆盖
    host.querySelector = function(){
        var resultEls = host.querySelectorAll.apply(this, arguments);
        return resultEls ? resultEls[0] : null;
    };
}

Exemple de test :

<listview id="foo" data-id="1">
    Hello World
    <p data-id="2"></p>
</listview>

<script>
var el = document.querySelector(&#39;#foo&#39;);
alert(el.querySelector(&#39;p&#39;).dataset.id);
</script>

Résumé du problème :

1. Le navigateur doit être capable de prendre en charge la méthode querySelector/ querySelectorAll, sinon cette méthode n'a aucun sens

2. ne peut fournir qu'un ensemble de données à partir de la méthode d'obtention d'éléments ; Par exemple, e.tartget.dataset du paramètre e dans le gestionnaire d'événements est un objet vide.

3. Comme le montre le code ci-dessus, un seul querySelector() passe par querySelectorAll(), qui inclut l'opération de parcours du tableau. Peut-il être optimisé de manière appropriée et utiliser le tableau natif ?

4. Pour les étudiants sensibles à la vitesse du CSS Selector Engine, cette méthode n'est pas applicable. Parce que la méthode du système est modifiée, on constate que les performances vont inévitablement diminuer. Mais on peut garantir que cette diminution est faible ;

5. ne prend pas encore en charge documenteny.getElementByID et sera ajouté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!