2010-06-19 4 views
3

나는 성공적으로 작업을 가지고 DOM 빌더를 만드는 중이라서하지만 지금은 좀 속기 기능을 할당하려고 그래서 div() -> 다음자바 스크립트 폐쇄 및 DOM Builder는

e("div") 내 코드입니다 :

//assign these objects to a namespace, defaults to window 
(function(parent) { 

/** 
* Creates string of element 
* @param tag The element to add 
* @param options An object of attributes to add 
* @param child ... n Child elements to nest 
* @return HTML string to use with innerHTML 
*/ 
var e = function(tag, options) { 
    var html = '<'+tag; 
    var children = Array.prototype.slice.apply(arguments, [(typeof options === "string") ? 1 : 2]); 

    if(options && typeof options !== "string") { 
     for(var option in options) { 
      html += ' '+option+'="'+options[option]+'"'; 
     } 
    } 

    html += '>'; 
    for(var child in children) { 
     html += children[child]; 
    } 
    html += '</'+tag+'>'; 
    return html; 
} 

//array of tags as shorthand for e(<tag>) THIS PART NOT WORKING 
var tags = "div span strong cite em li ul ol table th tr td input form textarea".split(" "), i=0; 
for(; i < tags.length; i++) { 
    (function(el) { //create closure to keep EL in scope 
     parent[el] = function() { 
      var args = Array.prototype.slice.call(arguments); 
      console.log(args); 
      args[0] = el; //make the first argument the shorthand tag 
      return e.apply(e,args); 
     }; 
    })(tags[i]); 
} 

//assign e to parent 
parent.e = e; 
})(window); 

현재 일어나고있는 것은 args 배열이 속기 함수 중 하나를 호출 할 때마다 수정되고 내가 만든 args 배열이 호출 될 때마다 영향을받지 않도록 어딘가에 클로저가 있어야한다고 가정합니다. 예상

DIV (DIV (스팬 ("콘텐츠")), 스팬()) : <div><div><span>Content</span></div><span></span></div> 결과 : <div><span></span></div>

DIV (DIV (스팬 (E ("B"다음은 단위 테스트의 출력은 전자 ("B", 전자 ("B")))), 스팬())) 예상 : <div><div><span><b><b><b></b></b></b></span><span></span></div></div> 결과 :이 비록 <div></div>

답변

0

금발 순간, 나는 첫 번째 요소를 덮어했다. 배열은 여전히 ​​자바 스크립트의 객체입니다. 배열의 인덱스는 for..in 루프를 사용하여 반복 할 경우 키가됩니다. 분명히 그 경우에 배열을 사용하는 것이 아니라 내가 분명히 할 것이라고 생각했다.

@Anurag - forEach 메서드는 IE8에서 지원되지 않으므로 (이후 9시 정도는 확실하지 않음) 나중에 나중에 사용할 때까지 신뢰할 수있는 방법이 아닐 수도 있습니다.

1

직접 귀하의 질문에 대답하지 않는,

for(var el in tags) { 

입니다 완전히 정확하지는 않습니다. tags은 객체가 아닌 배열이므로 for (... in ...)을 사용하여 해당 속성을 열거 할 수 없습니다. 시도하십시오

for(var el = 0; el < tags.length; el++) { 

이것은 인터프리터가 코드를 이해하고 올바른 알고리즘을 실행하는 데 큰 차이가 발생할 수 있습니다. 기술적으로 허용되는 배열에 for..in을하고 - 나는 args.unshift(el);

+0

오, 고마워, 나는 '각각을 위해'익숙해 졌어. – Louis

+0

@ 루이스 - 최근 버전의 자바 스크립트에는 '각 사용자 용'도 있습니다. 객체 값을 통해 열거하는 데 사용되며 주문에 신경 쓰지 않으면 배열과 함께 사용할 수 있습니다. Firefox에서는 {(a : 1, b : 2, c : 3}) console.log (v); 각각에 대해'를 시도해보십시오. – Anurag

0

@MvanGeest를 사용하는 것을 의미 할 때