HTML5 샘플 코드의 data-* 속성을 자동으로 가져오는 방법에 대한 자세한 설명

프로젝트에서 일련의 사용자 정의 태그를 디자인해야 하므로 태그 속성에 액세스하는 방법도 포함됩니다. HTML5의 data-* 속성을 사용하면 요소를 얻은 후 데이터 세트.속성 이름에 직접 액세스할 수 있습니다. 데이터 세트의 유형은 MAP 객체인 DOMStringMap {}이며, 이는 여전히 키/값 객체입니다. 사용하기 편리합니다. 하지만 호환성 문제가 발생하여 Android 2.3 등 일부 오래된 브라우저에서는 지원되지 않습니다.

이를 위한 호환성 패치를 작성할 수 있습니다. 주요 원칙은 document.querySelector/querySelectorAll과 같은 메소드를 "하이재킹"하여 요소를 얻은 다음 사용자 정의 필드 데이터세트 = {....}를 제공하여 유사한 표준 작성을 달성하는 것입니다. 물론 간단하게 getDataAttrib()와 같은 API 메소드를 제공하여 속성을 가져올 수 있으며 효과는 동일합니다. 우리가 이 방법이 아닌 다른 방법을 채택하는 이유는 표준에 더 가까워지고 모든 사람에게 일관된 액세스 방법을 사용하기 위한 것입니다.

내 구현은 다음과 같습니다.

// 如浏览器不支持 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;
    }
})();

요소를 가져오는 querySelector 메소드가 충분하다는 점을 고려하여 현재 documeny.getElementByID("#id") 메소드는 제공되지 않습니다.

참고: 문서가 아닌 개체에서 실행된 querySelector /querySelectorAll은 지원되지 않으며 데이터 세트가 반환되지 않습니다. 이 문제는 2013.1.16에 Element.prototype 메소드를 다시 작성하여 해결되었습니다. 자세한 과정은 다음과 같습니다.

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

테스트 예시:

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

문제 요약:

1. 브라우저가 다음을 지원할 수 있어야 합니다. querySelector/querySelectorAll 메서드, 그렇지 않으면 이 메서드도 의미가 없습니다.

2. 은 요소를 가져오는 메서드에서만 데이터 세트를 제공할 수 있습니다. 예를 들어, 이벤트 핸들러에서 e 매개변수의 e.tartget.dataset는 빈 객체입니다.

3. 위 코드에서 볼 수 있듯이 단일 querySelector()가 querySelectorAll()을 통해 전달되는데, 여기에는 배열을 순회하는 작업이 포함되어 적절하게 최적화되어 기본적으로 사용할 수 있습니까?

4. CSS Selector Engine의 속도에 민감한 학생들에게는 이 방법이 적용되지 않습니다. 시스템 방식을 수정했기 때문에 필연적으로 성능이 저하되는 것을 알 수 있다. 하지만 이 감소폭은 작다는 점은 보장할 수 있습니다.

5. 은 아직 documenteny.getElementByID를 지원하지 않으며 추가될 예정입니다.

위 내용은 HTML5 샘플 코드의 data-* 속성을 자동으로 가져오는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!