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는 매우 빨랐습니다.

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

프로토타입에서 각각의 예를 제시하겠습니다.

// 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용 Simple Templates 플러그인을 사용한 예입니다.

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

아마도 좀 더 현대적인 접근법은 Javascript를 포함한 여러 언어로 구현되어 있는 Beauthard와 같은 템플릿 언어를 사용하는 것입니다.예를 들어 다음과 같습니다.

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

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

서버 측 등 다른 장소에서 동일한 템플릿을 재사용할 수 있다는 이점도 있습니다.

좀 더 복잡한 템플릿(문장, 루프 등)이 필요한 경우 더 많은 기능을 갖추고 콧수염과 호환되는 핸들 바를 사용할 수 있습니다.

숨겨진 div에서 페이지에 템플릿 HTML을 추가한 후 cloneNode 및 즐겨찾는 라이브러리의 쿼리 기능을 사용하여 템플릿 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 라이브러리가 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에 데이터를 삽입하는 것을 지원하지 않습니다.이것은 토돌리스트에 관한 것이다.지금은 출력을 일반 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 Web 어플리케이션으로 동작합니다.

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

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

2) 퍼포먼스를 위해 가능하면 html을 문자열로 작성하여 페이지 전체에 삽입하는 것이 좋습니다.

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

4) 다른 옵션하지만 일반 텍스트/html로 제공하십시오. 왜 JSON입니까?PHP(서버 언어)와 Html이 혼합되어 있기 때문에 저는 이 방법을 좋아하지 않습니다.하지만 옵션 1과 4 사이에서 합리적인 절충안으로 채택하는 경우가 많습니다.

---

내 대답은 당신은 이미 올바른 방향을 보고 있다는 것이다.

저는 1에서 4사이에 저처럼 접근하기를 제안합니다.그렇지 않으면 웹 프레임워크 또는 템플릿 엔진을 채택합니다.

제 경험에 비추어 봤을 때...

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