javascript로 html을 생성하는 모범 사례가 있습니까?

JSON으로 개체 배열을 반환하는 웹 서비스를 호출하고 있습니다. 이러한 개체를 가져 와서 div를 HTML로 채우고 싶습니다. 각 개체에 URL과 이름이 포함되어 있다고 가정 해 보겠습니다.

각 개체에 대해 다음 HTML을 생성하려는 경우 :

<div><img src="the url" />the name</div>

이에 대한 모범 사례가 있습니까? 몇 가지 방법을 볼 수 있습니다.

1. 문자열 연결
2. 요소 만들기
3. 템플릿 플러그인 사용
4. 서버에서 html을 생성 한 다음 JSON을 통해 제공합니다.

옵션 # 1과 # 2는 가장 즉각적인 옵션이 될 것이지만 두 옵션 모두 문자열을 작성하거나 DOM 객체를 생성함으로써 성능 및 유지 관리에 미치는 영향을 느낄 것입니다.

템플릿 작성이 그다지 미숙 한 것은 아니며 대부분의 주요 Javascript 프레임 워크에서 팝업이 표시됩니다.

다음 은 성능 저하를 줄일 수있는 JQuery Template Plugin 의 예입니다 . 정말 간단합니다.

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
     url: jsonObj.url,
     name: jsonObj.name
});

나는 멋진 길을 가고 (그리고 더 나은 성능, 더 유지 보수하기 쉬운) 템플릿을 사용한다고 말한다.

절대적으로 문자열을 연결해야하는 경우 일반 대신 :

var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }

임시 배열 사용 :

var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");

특히 IE에서는 배열을 사용하는 것이 훨씬 빠릅니다. 얼마 전에 IE7, Opera 및 FF로 문자열을 테스트했습니다. Opera는 테스트를 수행하는 데 0.4 초 밖에 걸리지 않았지만 IE7은 20 분 후에 끝나지 않았습니다 !!!! (아니, 농담이 아닙니다.) 어레이 IE는 매우 빠릅니다.

처음 두 가지 옵션 중 하나가 일반적이며 허용됩니다.

Prototype 에서 각각의 예제를 제공하겠습니다 .

// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }

접근법 # 1 :

var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom

접근법 # 2 :

var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom

아마도 더 현대적인 접근 방식은 javascript를 포함한 여러 언어로 구현 된 Mustache 와 같은 템플릿 언어를 사용하는 것 입니다. 예를 들면 :

var view = {
  url: "/hello",
  name: function () {
    return 'Jo' + 'hn';
  }
};

var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);

추가 이점도 얻을 수 있습니다. 서버 측과 같은 다른 위치에서 동일한 템플릿을 재사용 할 수 있습니다.

더 복잡한 템플릿 (if 문, 루프 등)이 필요한 경우 더 많은 기능이 있고 Mustache와 호환되는 핸들 바를 사용할 수 있습니다 .

다음 은 jQuery 용 Simple Templates 플러그인을 사용하는 예입니다 .

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);

숨겨진 div의 페이지에 템플릿 HTML을 추가 한 다음 cloneNode 및 즐겨 찾는 라이브러리의 쿼리 기능을 사용하여 채울 수 있습니다.

/* CSS */
.template {display:none;}

<!--HTML-->
<div class="template">
  <div class="container">
    <h1></h1>
    <img src="" alt="" />
  </div>
</div>

/*Javascript (using Prototype)*/
var copy = $$(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})

공개 : 나는 BOB의 관리자입니다.

이 과정을 훨씬 쉽게 만들어주는 자바 스크립트 라이브러리 인 BOB가 있습니다. 있습니다.

구체적인 예 :

<div><img src="the url" />the name</div>

이것은 다음 코드에 의해 BOB로 생성 될 수 있습니다.

new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"

또는 더 짧은 구문으로

new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"

이 라이브러리는 매우 강력하며 데이터 삽입 (d3와 유사)을 통해 매우 복잡한 구조를 만드는 데 사용할 수 있습니다. 예 :

data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"

BOB는 현재 DOM에 데이터 삽입을 지원하지 않습니다. 이것은 todolist에 있습니다. 지금은 출력을 일반 JS 또는 jQuery와 함께 사용하여 원하는 곳에 둘 수 있습니다.

document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());

jquery 및 d3와 같은 대안에 만족하지 않았기 때문에이 라이브러리를 만들었습니다. 코드는 매우 복잡하고 읽기 어렵습니다. BOB로 작업하는 것은 제 생각에 편향되어 있으며 훨씬 더 즐겁습니다.

BOB는 Bower 에서 사용할 수 있으므로를 실행하여 얻을 수 있습니다 bower install BOB.

이에 대한 모범 사례가 있습니까? 몇 가지 방법을 볼 수 있습니다.

1. 문자열 연결
2. 요소 만들기
3. 템플릿 플러그인 사용
4. 서버에서 html을 생성 한 다음 JSON을 통해 제공합니다.

1) 옵션입니다. 클라이언트 측에서 JavaScript로 html을 빌드 한 다음 전체적으로 DOM에 삽입합니다.

이 접근 방식에는 패러다임이 있습니다. 서버는 데이터 만 출력하고 (상호 작용의 경우) AJAX 요청과 비동기 적으로 클라이언트로부터 데이터를 수신합니다. 클라이언트 측 코드는 독립 실행 형 JavaScript 웹 애플리케이션으로 작동합니다.

웹 애플리케이션은 서버가 작동하지 않아도 작동하고 인터페이스를 렌더링 할 수 있습니다 (물론 데이터를 표시하거나 어떤 종류의 상호 작용도 제공하지 않습니다).

이 패러다임은 최근에 자주 채택되고 있으며 전체 프레임 워크는이 접근 방식을 기반으로 구축됩니다 (예 : backbone.js 참조).

2) 성능상의 이유로 가능한 경우 html을 문자열로 빌드 한 다음 전체적으로 페이지에 삽입하는 것이 좋습니다.

3) 이것은 웹 애플리케이션 프레임 워크를 채택하는 것뿐만 아니라 또 다른 옵션입니다. 다른 사용자는 사용 가능한 다양한 템플릿 엔진을 게시했습니다. 나는 당신이 그들을 평가하고이 길을 따를 지 말지를 결정할 수있는 능력을 가지고 있다는 인상을 받았습니다.

4) 다른 옵션. 그러나 일반 텍스트 / html로 제공하십시오. 왜 JSON인가? PHP (서버 언어)와 Html이 혼합되어 있기 때문에이 접근 방식이 마음에 들지 않습니다. 그러나 나는 이것을 옵션 1 과 4 사이의 합리적인 절충안으로 자주 채택합니다 .

내 대답 : 당신은 이미 올바른 방향을 찾고 있습니다.

나 처럼 1 과 4 사이의 접근 방식을 채택하는 것이 좋습니다 . 그렇지 않으면 웹 프레임 워크 또는 템플릿 엔진을 채택하십시오.

내 경험을 바탕으로 한 내 의견 ...