jQuery-복잡한 HTML 조각을 만드는 모범 사례

jQuery-복잡한 HTML 조각을 만드는 모범 사례

---

jQuery에서 다소 복잡한 HTML 요소를 만드는 일반적인 모범 사례가 있습니까? 몇 가지 다른 방법을 시도했습니다.

먼저 createElement를 사용하고 AppendTo 등과 함께 많은 것을 연결해 보았습니다.

var badge = $(document.createElement("div")).attr("class", "wrapper1").appendTo("body");
$(document.createElement("div")).attr("class", "wrapper2").appendTo(".wrapper1");
$(document.createElement("table")).attr("class", "badgeBody").appendTo(".wrapper2");
$(document.createElement("tr")).attr("class", "row1").appendTo(".badgeBody");
$(document.createElement("td")).appendTo(".row1");
$(document.createElement("span")).attr("class", "badgeUnlocked").text("UNLOCKED! ").appendTo("td");
$(document.createElement("td")).attr("class", "badgeTitleText").appendTo(".row1");
$(document.createElement("span")).attr("class", "badgeTitle").text(name).appendTo(".badgeTitleText");
$(document.createElement("tr")).attr("class", "row2").appendTo(".badgeBody");
$(document.createElement("td")).appendTo(".row2");
$(document.createElement("img")).attr("src", imgUrl).appendTo(".row2 td");
$(document.createElement("td")).attr("class", "badgeText").appendTo(".row2");
$(document.createElement("span")).attr("class", "badgeDescription").text(description).appendTo(".badgeText");

appendTo가 모든 일치하는 요소에 추가하기를 원하기 때문에 모든 것이 자체 이름이 필요하기 때문에 이것은 거칠 수 있습니다. 그렇지 않으면 모든 곳에서 반복적으로 추가됩니다.

그런 다음 배열을 만들고 함께 결합 해 보았습니다.

var badgeFragment = [
'<div><div id="'+ closeId+'" class="closeTab">X</div>',
'<div id="'+ badgeId+'" class="wrapper1">',
'<div class="wrapper2">',
'<div class="badgeBody">',
'<div class="badgeImage">',
'<img src="'+ imgUrl +'">',
'</div>',
'<div class="badgeContents">',
'<div class="badgeUnlocked">ACHIEVEMENT UNLOCKED: </div>',
'<div class="badgeTitle">'+ name +'</div>',
'<div id="'+ textId+'" class="badgeDescription">'+ description +'</div>',
'</div>',
'<div style="clear:both"></div>',
'</div></div></div></div></div>',
]

badgeFragment = $(badgeFragment.join(''));

IE에서는 alert ($ (badgeFragment) .text ())를 넣을 때 보통 빈 상태로 돌아 왔지만 이것은 꽤 잘 작동하는 것 같습니다. (이것은 더 큰 문제를 디버깅하는 일부였습니다). 나는 분명히 jQuery (그리고 Javascript조차도 실제로)에 약간 익숙하므로 이것이 문제가 아닌지 확인하기 위해 세 번째 방법 인 거대한 문자열 연결을 시도했습니다.

var badgeFragment =
'<div><div id="'+ closeId+'" class="closeTab">X</div>' +
'<div id="'+ badgeId+'" class="wrapper1">' +
'<div class="wrapper2">' +
'<div class="badgeBody">' +
'<div class="badgeImage">' +
'<img src="C:/Users/Ryan/Documents/icons/crystal_project/64x64/apps/chat.png">' +
'</div>' +
'<div class="badgeContents">' +
'<div class="badgeUnlocked">ACHIEVEMENT UNLOCKED: </div>' +
'<div class="badgeTitle">test</div>' +
'<div id="'+ textId+'" class="badgeDescription">test</div>' +
'</div>' +
'<div style="clear:both"></div>' +
'</div></div></div></div></div>';

이러한 방법 중 하나가 일반적으로 다른 방법보다 나은 것으로 간주됩니까? 나는 다양한 프로파일 러가 좋지 않아서 이것을 직접 확인하는 방법을 모르겠습니다. 이러한 모든 방법이 브라우저 간 호환 여부에 대한 질문도 있습니다.

---

jQuery 1.4를 사용하면 다음과 같은 HTML 요소를 만들 수 있습니다.

// create an element with an object literal, defining properties
var e = $("<a />", {
    href: "#",
    "class": "a-class another-class", // you need to quote "class" since it's a reserved keyword
    title: "..."
});

// add the element to the body
$("body").append(e);

다음 은 문서 링크 입니다.

이 접근 방식이 html()jQuery 의 기능을 사용하는 것보다 빠르지 모르겠습니다 . 또는 jQuery를 모두 건너 뛰고 innerHTML요소에 속성을 사용하는 것보다 빠릅니다 . 그러나 가독성에 관한 한; jQuery 접근 방식이 가장 좋습니다. 그리고 대부분의 경우 사용으로 인한 성능 이득 innerHTML은 미미합니다.

---

document.createElement를 호출 할 필요가 없습니다.

$('#existingContainer').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

jQuery에는 DOM 확장 / 수정을위한 모든 종류의 유용한 도구가 있습니다. 예를 들어 다양한 "포장"방법을 살펴보십시오.

또 다른 가능성 : 새로운 콘텐츠의 정말 큰 덩어리의 경우 서버에서이를 준비하고 (서버 측 템플릿 시스템 사용) $.load()다른 ajax 접근 방식을 사용 하여 가져 오는 것이 더 나을 수 있습니다 .

---

jQote 와 같은 jquery의 템플릿 엔진 중 하나를 살펴보고 싶습니다 .

---

John Resig (jQuery의 창시자)는 2008 년에이 템플릿 방법을 사용할 것을 제안했습니다. 실제로 몇 가지 멋진 기능이 있습니다.

<script type="text/html" id="item_tmpl">

  <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
    <div class="grid_1 alpha right">
      <img class="righted" src="<%=profile_image_url%>"/>
    </div>
    <div class="grid_6 omega contents">
      <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
    </div>
  </div>

</script>

다음을 사용하여 검색 중 ...

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

자세한 내용은 여기를 참조하십시오. http://ejohn.org/blog/javascript-micro-templating/

---

JavaScript 코드가 HTML 태그 구조와 유사하면 더 읽기 쉽고 유지 관리하기 쉽습니다. $ ( 'div', { 'class': 'etc'}) ...를 사용하여 공식 jQuery 경로로 이동할 수 있습니다.

다음은 $$ 함수를 사용하여 각 요소를 편집 가능한 jQuery 객체로 만드는 약간 다른 접근 방식입니다. HTML 파싱이 일어나지 않기 때문에 꽤 빠릅니다.

$$('div', {'id':'container'},
    $$('div', {'id':'my_div'},
        $$('h1',{'class':'my_header'},
            $$('a',{'href':'/test/', 'class':'my_a_class'}, 'teststring'))));

이것은 접근 방식을 더 유연하게 만들고 매우 쉽게 체인을 사용하여 중첩 된 jQuery 객체에 이벤트 핸들러, 데이터 등을 추가 할 수 있습니다.

$$('div', {'id':'container'},
    $$('div', {'id':'my_div'},
        $$('h1',{'class':'my_header'},
            $$('a', { 'href': '/test/', 'class': 'my_a_class' }, 'teststring')
        ).click(function() { alert('clicking on the header'); })
    ).data('data for the div')
).hide();

코드는 .append (), .text (), .html () 등에 대한 별도의 호출로 수행하는 공식 jQuery 접근 방식을 사용하거나 jQuery $에 연결된 HTML 문자열을 공급하는 것보다 더 읽기 쉽습니다.

참조 함수 $$ :

function $$(tagName, attrTextOrElems) {
    // Get the arguments coming after the params argument
    var children = [];
    for (var _i = 0; _i < (arguments.length - 2) ; _i++) {
        children[_i] = arguments[_i + 2];
    }

    // Quick way of creating a javascript element without JQuery parsing a string and creating the element
    var elem = document.createElement(tagName);
    var $elem = $(elem);

    // Add any text, nested jQuery elements or attributes
    if (attrTextOrElems) {
        if (typeof attrTextOrElems === "string") { // text
            var text = document.createTextNode(attrTextOrElems);
            elem.appendChild(text);
        }
        else if (attrTextOrElems instanceof jQuery) { // JQuery elem
            $elem.append(attrTextOrElems);
        }
        else // Otherwise an object specifying attributes e.g. { 'class': 'someClass' }
        {
            for (var key in attrTextOrElems) {
                var val = attrTextOrElems[key];
                if (val) {
                    elem.setAttribute(key, val);
                }
            }
        }
    }

    // Add any further child elements or text    
    if (children) {
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            if (typeof child === "string") { // text
                var text = document.createTextNode(child);
                elem.appendChild(text);
            } else { // JQuery elem
                $elem.append(child);
            }
        }
    }
    return $elem;
}

---

I personally think that it's more important for the code to be readable and editable than performant. Whichever one you find easier to look at and make changes to without breaking it should be the one you choose.

---

I like the templating language Handlebars.js

---

Since HTML5 there's the <template> tag.

$(function () {
    // Get template
    var template = $("#template").html();

    // Create a new row from the template
    var $row = $(template);

    // Add data to the row
    $row.find("td[data-template='firstName']").text("Foo");
    $row.find("td[data-template='lastName']").text("Bar");

    // Add the row to the table
    $("#table").append($row);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<template id="template">
  <tr>
    <td data-template="firstName"></td>
    <td data-template="lastName"></td>
  </tr>
</template>

<table id="table">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
</table>

---

The way I am doing is shown bellow. I am not sure if u should create so many divs but it worked pretty well with me.

var div1 = $('<div class="colwrap_fof"></div>');        //THE COMPLEX DIV ITSELF
var div2 = $('<div class="homeimg"></div>');                
var div21 = $('<div id="backImageDiv'+fof_index+'" class="backDiv"></div>');
var div22 = $('<div id="frontImageDiv'+fof_index+'"  class="frontDiv"></div>');
div2.append(div21);
div2.append(div22);
div1.append(div2);
$("#df_background").append(div1);     // ADDING the complex div to the right place      

Cheers,

ReferenceURL : https://stackoverflow.com/questions/2217409/jquery-best-practice-for-creating-complex-html-fragments