JavaScript로 HTML을 생성하기위한 모범 사례가 있습니까?

StackOverflow https://stackoverflow.com/questions/220603

문제

JSON에서 객체 배열을 반환하는 웹 서비스를 호출합니다. 나는 그 물건들을 가져 가서 html로 div를 채우고 싶습니다. 각 객체에 URL과 이름이 포함되어 있다고 가정 해 봅시다.

각 객체에 대해 다음 HTML을 생성하려면 다음과 같습니다.

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

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

  1. 문자열을 연결합니다
  2. 요소를 만듭니다
  3. 템플릿 플러그인을 사용하십시오
  4. 서버에서 HTML을 생성 한 다음 JSON을 통해 서빙하십시오.
도움이 되었습니까?

해결책

옵션 #1과 #2는 가장 즉각적인 직접적인 옵션이 될 것입니다. 그러나 두 옵션 모두에 대해 문자열을 구축하거나 DOM 객체를 만들면 성능 및 유지 보수 영향을 느낄 것입니다.

템플릿이 그다지 미성숙 한 것은 아니며 대부분의 주요 JavaScript 프레임 워크에서 팝업을 볼 수 있습니다.

다음은 예입니다 jQuery 템플릿 플러그인 그것은 당신에게 성능 히트를 절약 할 것이며, 정말로, 정말 간단합니다.

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("");

배열 사용은 특히 더 빠릅니다. 나는 얼마 전에 IE7, Opera 및 FF로 문자열로 약간의 테스트를했습니다. 오페라는 테스트를 수행하는 데 0.4 초만 걸렸지 만 IE7은 20 분 후에 끝나지 않았습니다 !!!! (아니요, 농담이 아닙니다.) 배열로 인해 매우 빠릅니다.

처음 두 옵션 중 하나는 공통적이고 허용됩니다.

나는 각각의 예를 제시 할 것이다 원기.

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

다음은 내 예를 사용합니다 간단한 템플릿 jQuery 용 플러그인 :

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

아마도 더 현대적인 접근 방식은 다음과 같은 템플릿 언어를 사용하는 것입니다. 수염, JavaScript를 포함한 많은 언어로 구현된다. 예를 들어:

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

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

추가 혜택을 얻을 수도 있습니다. 서버 측과 같은 다른 장소에서 동일한 템플릿을 재사용 할 수 있습니다.

더 복잡한 템플릿 (명령문, 루프 등)이 필요한 경우 사용할 수 있습니다. 핸들 바 더 많은 기능이 있으며 콧수염과 호환됩니다.

숨겨진 div의 템플릿 html을 페이지에 추가 한 다음 클로네 노드와 좋아하는 라이브러리의 쿼리 시설을 사용하여 채워집니다.

/* 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의 관리자입니다.

이 프로세스를 훨씬 쉽게 호출하는 JavaScript 라이브러리가 있습니다. 단발.

특정 예를 위해 :

<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에 주입하는 것을 지원하지 않습니다. 이것은 유아 주의자에 있습니다. 지금은 출력을 일반 J 또는 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과 함께 일하는 것은 제 생각에 분명히 편향되어 있으며 훨씬 더 즐겁습니다.

밥을 사용할 수 있습니다 나무 그늘, 따라서 실행하여 얻을 수 있습니다 bower install BOB.

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

  1. 문자열을 연결합니다
  2. 요소를 만듭니다
  3. 템플릿 플러그인을 사용하십시오
  4. 서버에서 HTML을 생성 한 다음 JSON을 통해 서빙하십시오.

1) 이것은 옵션입니다. 클라이언트쪽에 JavaScript를 사용하여 HTML을 구축 한 다음 전체적으로 DOM에 주입하십시오.

이 접근법의 배경이 있습니다. 서버는 데이터 만 출력하고 (상호 작용의 경우) AJAX 요청과 함께 클라이언트 Asyncronoulsy로부터 데이터를 수신합니다. 클라이언트 측 코드는 독립형 JavaScript 웹 응용 프로그램으로 작동합니다.

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

이 패러다임은 최근에 자주 채택되고 있으며 전체 프레임 워크 가이 접근법을 중심으로 구축됩니다 (예 : Backbone.js 참조).

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

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

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

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

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

내 경험에 근거한 내 의견은 ...

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top