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

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

There is a javascript library that makes this process a lot easier called BOB.

For your specific example:

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

This can be generated with BOB by the following code.

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

Or with the shorter syntax

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

This library is quite powerful and can be used to create very complex structures with data insertion (similar to d3), eg.:

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 does currently not support injecting the data into the DOM. This is on the todolist. For now you can simply use the output together with normal JS, or jQuery, and put it wherever you want.

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

---

I made this library because I was not pleased with any of the alternatives like jquery and d3. The code very complicated and hard to read. Working with BOB is in my opinion, which is obviously biased, a lot more pleasant.

BOB is available on Bower, so you can get it by running bower install BOB.

---

Is there a best practice for this? I can see a few ways of doing it:

1. Concatenate strings
2. Create elements
3. Use a templating plugin
4. Generate the html on the server, then serve up via JSON.

1) This is an option. Build up the html with JavaScript on the client side and then inject it in the DOM as a whole.

Note that there is a paradigm behind this approach: the server outputs just data and (in case of interaction) receives data from the client asyncronoulsy with AJAX requests. The client side code operete as a stand-alone JavaScript web application.

The web application may operate, render the interface, even without the server being up (of course it won't display any data or offer any kind of interaction).

This paradigm is getting adopted often lately, and entire frameworks are build around this approach (see backbone.js for example).

2) For performance reasons, when possible, is better to build the html in a string and then inject it as a whole into the page.

3) This is another option, as well as adopting a Web Application framework. Other users have posted various templating engines available. I have the impression that you have the skills to evaluate them and decide whether to follow this path or not.

4) Another option. But serve it up as a plain text/html; why JSON? I don't like this approach because mixes PHP (your server language) with Html. But I adopt it often as a reasonable compromise between option 1 and 4.

---

My answer: you are already looking in the right direction.

I suggest to adopt an approach between 1 and 4 like I do. Otherwise adopt a web framework or templating engine.

Just my opinion based on my experience...

참고URL : https://stackoverflow.com/questions/220603/is-there-a-best-practice-for-generating-html-with-javascript