[javascript] HTML 태그의 비표준 속성. 좋은 것? 나쁜 일? 당신의 생각?

Program / 글쓴이

HTML (또는 XHTML 만?)은 태그의 비표준 속성과 관련하여 상대적으로 엄격합니다. 사양의 일부가 아닌 경우 코드는 비준수 코드로 간주됩니다.

그러나 비표준 속성은 메타 데이터를 Javascript로 전달하는 데 상당히 유용 할 수 있습니다. 예를 들어 링크가 팝업을 표시한다고 가정하면 속성에 팝업 이름을 설정할 수 있습니다.

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

또는 스팬과 같은 숨겨진 요소에 팝업 제목을 저장할 수 있습니다.

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

그러나 나는 어느 것이 선호되는 방법인지에 대해 찢어졌습니다. 첫 번째 방법은 더 간결하며 검색 엔진과 스크린 리더를 많이 사용하지 않는 것 같습니다. 반대로 두 번째 옵션을 사용하면 많은 양의 데이터를 더 쉽게 저장할 수 있으므로 더 다양하게 사용할 수 있습니다. 또한 표준을 준수합니다.

이 커뮤니티의 생각이 궁금합니다. 이런 상황을 어떻게 처리합니까? 첫 번째 방법의 단순성이 잠재적 인 단점을 능가합니까 (있을 경우)?

답변

저는 제안 된 HTML 5 솔루션 ( data-접두사가 붙은 속성) 의 열렬한 팬입니다 . 편집 : 사용자 지정 속성 사용에 대한 더 나은 예가있을 수 있다고 덧붙입니다. 예를 들어, 표준 속성에 아날로그가없는 사용자 지정 응용 프로그램에서 사용할 데이터 (예 : className 또는 id로 표현할 수없는 항목을 기반으로 한 이벤트 처리기에 대한 사용자 지정).

답변

사용자 정의 속성은 클라이언트 측에 추가 데이터를 전달하는 편리한 방법을 제공합니다. Dojo Toolkit은이 작업을 정기적으로 수행하며 다음과 같이 지적되었습니다 ( Debunking Dojo Toolkit Myths ).

사용자 정의 속성은 항상 유효한 HTML이었으며 DTD에 대해 테스트 할 때 유효성을 검사하지 않습니다. […] HTML 사양은 인식되지 않은 속성은 사용자 에이전트의 HTML 렌더링 엔진에서 무시해야한다고 명시하고 있으며 Dojo는 선택적으로이를 활용하여 개발 용이성을 향상시킵니다.

답변

또 다른 옵션은 Javascript에서 다음과 같이 정의하는 것입니다.

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

그런 다음 링크에이 해시 테이블의 ID에 해당하는 ID가 있다고 가정하여 나중에 Javascript 코드에서 사용할 수 있습니다.

비표준 속성이나보기 흉한 숨겨진 스팬이라는 다른 두 가지 방법의 단점이 없습니다.

단점은 예제처럼 간단한 일에 약간의 과잉 일 수 있다는 것입니다. 그러나 전달할 데이터가 더 많은 더 복잡한 시나리오의 경우 좋은 선택입니다. 특히 데이터가 JSON으로 전달된다는 점을 고려하면 복잡한 객체를 쉽게 전달할 수 있습니다.

또한 데이터를 서식과 별도로 유지하므로 유지 관리에 도움이됩니다.

다음과 같은 것을 가질 수도 있습니다 (다른 방법으로는 실제로 할 수 없습니다).

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

…

<a id="poi-2" href="/poi/2/">Hatsune</a>

그리고 아마도 서버 측 프로그래밍 언어를 사용하기 때문에이 해시 테이블은 동적으로 생성하기가 쉽지 않습니다 (JSON으로 직렬화하고 페이지의 헤더 섹션에 뱉어 냄).

답변

이 경우 최적의 솔루션은 

<a href="#" alt="" title="Title of My Pop-up">click</a>

제목 속성을 사용합니다.

정말 필요한 경우 때때로 사양을 위반합니다. 그러나 드물게 좋은 이유가 있습니다.

편집 : 왜 -1인지 확실하지 않지만 때로는 사양을 깨뜨릴 필요가 있다고 생각하지만 그렇지 않을 때 지적했습니다.

답변

커스텀 DTD에서 popup_title 속성을 선언하지 않는 이유는 무엇입니까? 이것은 검증 문제를 해결합니다. 모든 비표준 요소, 속성 및 값에 대해이 작업을 수행하고이 유효성 검사가 내 코드에 대한 실제 문제 만 보여 주어 감사합니다. 이것은 또한 그러한 HTML에서 브라우저 오류를 덜 가능하게합니다.

답변

앵커 요소 안에 숨겨진 입력 요소를 중첩 할 수 있습니다.

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

그런 다음 쉽게 데이터를 가져올 수 있습니다.

$('#anchor_id .articleid').val()

답변

결국 내 해결책은 일종의 구분 기호로 구분 된 id 태그에 추가 데이터를 숨기는 것이 었습니다 (하나의 밑줄은 공백이고 두 개는 해당 인수의 끝입니다). 두 번째 인수에는 ID가 있습니다.

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

추악하고 이미 다른 것을 위해 id 태그를 사용하고 있지 않다고 가정하지만 모든 브라우저에서 호환됩니다.