2011-10-13 2 views
0

지금은 새로운 HTML5 책 (Peter Kröner의 HTML5, Webseiten innovativ und zukunftssicher)을 읽었습니다. HTML5를 이해하기 위해 IE6-8을 가르치는 방법에 대한 몇 가지 예가 있습니다. (자바 스크립트가 활성화 된 경우) 한 가지 전략은 다음과 같습니다왜 string.replace가 변수를 포함하는 함수를 올바르게 실행하는지 이해할 수 없습니까?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>HTML5 in IE</title> 
     <script> 
      'abbr article aside audio canvas details figcaption 
      figure footer header hgroup mark menu meter nav 
      output progress section summary time video' 
      .replace(/\w+/g, function(n) {window.document.createElement(n)}); 
     </script> 
    </head> 
    <body> 
    <section> 
     <header> 
       <h1>This is the header</h1> 
     </header> 
     <section> 
      <h2>Chapter 1</h2> 
       <p> 
       Text, Text, Text, Text, Text... 
       Text, Text, Text, Text, Text... 
       Text, Text, Text, Text, Text... 
       Text, Text, Text, Text, Text...  
       </p> 
     </section> 
     <footer> 
      <p> 
       This is the footer. 
      </p> 
     </footer> 
    </section> 
    </body> 
</html> 

내가 IE의 디버거를 열 때 DOM이 올바른 것입니다. JS 함수를 생략하면 DOM이 손상됩니다. 그래서이 예제가 작동합니다. 이해가 안되는 부분은이 대체 문이 실제로 어떻게 작동하는지입니다. string.replace 권리를 이해하면 함수 자체로 문자열을 대체해야하지만 분명히 window.document.createElement가 바뀌었고 각 "태그"와 함께 올바르게 실행되어 각 "태그"가 함수에 의해 구문 분석되었습니다. 왜이게 효과가 있니?

+0

IE6-8? 음? –

+0

그 이유는 무엇입니까? – Bevor

답변

0
'abbr article aside audio'.replace(/\w+/g, function(n) { console.log(n); }); 

는 생산 :

abbr 
article 
aside 
audio 


.replace(regex, callback) 검색 한 각 경기, 인수로 경기에 콜백을 실행합니다. 이 예제에서는 .replace()의이 속성을 사용하여 문자열의 모든 단어에 대해 dom 요소를 만듭니다.

가 사용하는 동일한 의미를 구현 Array : HTML5 용

var elems = ['abbr', 'article', 'aside', 'audio']; 
for(var i = 0; i < elems.length; i++) { 
    window.document.createElement(elems[i]); 
} 
+0

감사합니다. 그 하나의 매개 변수가 문자열이나 함수가 될 수 있다는 것을 나는 몰랐다. 내가 처음 보는 것은 이것입니다. 나는 최근에 새로운 책을 얻었고, 이것에 관해 쓰여진 것이 없기 때문에 나는 지금 조금 화가났다. – Bevor

1

replace() 문자열의 두 번째 매개 변수로 함수를 사용하여 문자열의 일치하는 문자를 바꿀 수 있습니다. 함수에 전달 된 첫 번째 매개 변수는 현재 정규 표현식 일치에 일치하는 문자열입니다.이 경우 태그 이름 "abbr", "article"등 각각이 있으며 window.document.createElement()에 전달됩니다.

자세한 내용은 MDN을 참조하십시오.

+0

분명히이 참고 자료는 내가 최근에 얻은 Javascript 책보다 낫다. – Bevor

관련 문제