jQuery에서 html 요소를 만드는 가장 명확한 방법
저는 jQuery에서 요소를 만드는 많은 다른 스타일(그리고 거의 다른 방법)을 보았습니다.그것들을 만드는 가장 명확한 방법이 궁금했고, 또한 어떤 특정한 방법이 다른 방법보다 객관적으로 더 좋은지에 대해서도 궁금했습니다.아래는 제가 본 스타일과 방법의 예시입니다.
var title = "Title";
var content = "Lorem ipsum";
// escaping endlines for a multi-line string
// (aligning the slashes is marginally prettier but can add a lot of whitespace)
var $element1 = $("\
<div><h1>" + title + "</h1>\
<div class='content'> \
" + content + " \
</div> \
</div> \
");
// all in one
// obviously deficient
var $element2 = $("<div><h1>" + title + "</h1><div class='content'>" + content + "</div></div>");
// broken on concatenation
var $element3 = $("<div><h1>" +
title +
"</h1><div class='content'>" +
content +
"</div></div>");
// constructed piecewise
// (I've seen this with nested function calls instead of temp variables)
var $element4 = $("<div></div>");
var $title = $("<h1></h1>").html(title);
var $content = $("<div class='content'></div>").html(content);
$element4.append($title, $content);
$("body").append($element1, $element2, $element3, $element4);
그 밖에 사용할 수 있는 방법이나 스타일을 자유롭게 설명해 주시기 바랍니다.
템플릿은 훌륭하며 프로젝트에서 템플릿에 접근할 수 있는 경우 사용할 것을 제안합니다.언더스코어 또는 로다시를 사용하는 경우 내장되어 있습니다.그러나 리팩토링이든 테스트이든 간에 코드에 HTML을 작성해야 하는 경우도 있습니다.그것이 요구사항일 때 아래 서식이 읽기에 가장 명확하다는 것을 알았습니다.
참고: HTML 사양은 마크업에서 속성에 대해 단일 OR 두 개의 따옴표를 허용하므로 모든 미친 듯이 빠져나가지 마십시오.
this.$fixture = $([
"<div>",
" <div class='js-alert-box'></div>",
" <form id='my-form-to-validate'>",
" <input id='login-username' name='login-username'>",
" </form>",
"</div>"
].join("\n"));
한참을 둘러본 끝에 드디어 마음에 드는 스타일을 찾았습니다.일단 제가 콧수염을 사용해서 템플릿을 만들었는데 효과가 좋았습니다.하지만 때로는 재사용하지 않고 한 번만 요소를 구축하거나 다른 라이브러리를 도입하지 않는 다른 동기를 갖기만 하면 됩니다.이런 상황에서 다음을 사용하게 되었습니다.
$("body")
.append(
$("<div>")
.append(
$("<div>")
.append(
$("<h1>").text(title)
)
)
.append(
$("<div>").text(content)
)
);
은 이기 가 있습니다.append()연결된 개체에 대한 참조를 반환합니다.append()동일한 개체에 부착합니다.적절한 들여쓰기를 사용하면 마크업의 구조가 명확하며, 이렇게 하면 수정하기 쉽습니다.물론 템플릿을 사용하는 것보다 느리지만(전체를 하나씩 구축해야 함) 초기화나 이와 유사한 작업에만 사용하는 경우에는 큰 타협점이 됩니다.
이런 구조물을 포맷할 수 있는 방법은 여러 가지가 있지만, 저는 상황을 분명히 하기 위해 선택했습니다.제가 사용한 규칙은 각 선에 최대 하나의 여는 괄호와 하나의 닫는 괄호가 있어야 한다는 것입니다.또한 이 부록 트리의 잎은 jQuery constructor에게 전달할 필요가 없지만 시각적 반복을 위해 여기서 수행했습니다.
DOM building에 관해서는 문자열 연결이 미묘한 버그와 제대로 인코딩되지 않은 출력을 초래할 수 있기 때문에 이를 피하려고 합니다.
나는 이것이 좋습니다.
$('<div/>', {
html: $('<h1/>', {
html: title
}).after(
$('<div/>', {
'text': content,
'class': 'content'
})
)
}).appendTo('body');
생성:
...
<div><h1>some title</h1><div class="content">some content</div></div>
</body>
그리고 적절한 HTML 인코딩과 DOM tree building을 위해 일치하는 열림과 닫힘 태그가 일치합니다.
나의 충고: jQuery로 html 요소를 만들려고 하지 마세요. 그것은 그것의 책임이 아닙니다.
콧수염이나 핸들바J와 같은 자바스크립트 템플릿 시스템을 사용합니다.
매우 제한된 수의 행을 사용하여 자바스크립트 객체에서 직접 html 요소를 만들 수 있습니다.복잡하지 않고 두 가지 기능과 템플릿만 있습니다.
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
var context = {title: "My New Post", body: "This is my first post!"}
var template = Handlebars.compile($("#template-skeleton"));
var html = template(context);
편집:
html, 순수 자바스크립트가 없는 또 다른 예 (ICanHaz에서):
var skeleton = '<div><h1>{{title}}</h1><div class="content">{{content}}</div></div>';
var data = { title: "Some title", content: "Some content" };
var html = Mustache.to_html(skeleton, data);
이것은 일련의 연결보다 훨씬 더 유지보수성이 뛰어납니다.
2015년 답변:
ES6의 경우 JavaScript 템플릿 문자열을 사용합니다.
var str = `
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>`
이전 브라우저의 경우 다중 줄을 사용합니다.
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
이것은 베어의 대답을 각색한 것입니다.읽기 쉽고, 배열을 생성하고 참여할 필요가 없으며, 모든 행에 인용문을 붙일 필요가 없습니다.
var html =
' \
<div> \
<div class="js-alert-box"></div> \
<form id="my-form-to-validate"> \
<input id="login-username" name="login-username"> \
</form> \
</div> \
'
// using jQuery:
//
var dom = $( html )
// or if you need performance, don't use jQuery
// for the parsing.
// http://jsperf.com/create-dom-innerhtml-vs-jquery
//
var div = document.createElement( 'div' )
div.innerHTML = html
var dom = $( div )
참고로, 성능이 문제가 되지 않고 요소에 동적 데이터가 많이 포함되어 있을 때, 저는 가끔 이렇게 코드를 씁니다. 폐쇄 컴파일러는 인용되지 않은 클래스 속성에 대해 경고를 보내지만, 현대 브라우저에서는 잘 작동합니다.
$(
'<a></a>'
, {
text : this.fileName
, href : this.fileUrl
, target : '_blank'
, class : 'file-link'
, appendTo : this.container
}
)
$(htmlString)을 사용하고 HTML 코드의 표준 레이아웃을 모방하는 예는 다음과 같습니다.
function getPage(title, contents) {
return (
$("<div>", {id: "container", class: "box"}).append(
$("<div>", {class: "title"}).append(
$("<h1>").text(title)
),
$("<div>").html(contents)
)
);
}
javascript view 템플릿을 확인할 수 있습니다.
http://jupiterjs.com/news/jquery-view-client-side-templates-for-jquery
http://javascriptmvc.com/docs.html#!jQuery.View
저는 기능적 접근이 매우 편리하다고 생각합니다.예를 들어.
// reusable generics TABLE constructor helpers
var TD = function(content) { return $('<td>', { html: content }) }
var TH = function(content) { return $('<th>', { html: content }) }
var TR = function(cell, cells) { // note the kind of cell is a 2^order parameter
return $('<tr>', { html: $.map(cells, cell) })
}
// application example
THEAD = $('<thead>', {html:
TR(TH, [1,2,3,4])})
TBODY = $('<tbody>', {html: [
TR(TD, ['a','b','c','d']),
TR(TD, ['a','b','c','d']),
]})
지금이 기회입니다.
$('#table').append($('<table>', {html: [THEAD, TBODY]}))
수확량
<table><thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr></tbody></table>편집하다
이제 html_uty.js와 같은 접근 방식을 개선했습니다.
백틱을 이용한 가장 간단한 방법은
var optionsForLength = `
<option value="Kilometre">Kilometre</option>
<option value="Metre">Metre</option>
<option value="Centimetre">Centimetre</option>
<option value="Milimetre">Milimetre</option>
<option value="Micrometre">Micrometre</option>
<option value="Nanometre">Nanometre</option>
<option value="Mile">Mile</option>
<option value="Yard">Yard</option>
<option value="Foot">Foot</option>
<option value="Inch">Inch</option>
`;
또는 작은 따옴표를 사용하여 HTML을 자바스크립트 안에 래핑할 수도 있습니다.
var optionsForLength =
'<option value="Kilometre">Kilometre</option>'+
'<option value="Metre">Metre</option>'+
'<option value="Centimetre">Centimetre</option>'+
'<option value="Milimetre">Milimetre</option>'+
'<option value="Micrometre">Micrometre</option>'+
'<option value="Nanometre">Nanometre</option>'+
'<option value="Mile">Mile</option>'+
'<option value="Yard">Yard</option>'+
'<option value="Foot">Foot</option>'+
'<option value="Inch">Inch</option>'+
'<option value="Nautical mile">Nautical mile</option>';
언급URL : https://stackoverflow.com/questions/9760328/clearest-way-to-build-html-elements-in-jquery
'programing' 카테고리의 다른 글
| C와 자바의 논리적 차이 (0) | 2023.10.14 |
|---|---|
| 단위 테스트 클릭 이벤트(Angular) (0) | 2023.10.09 |
| C# 문자열의 여러 문자 바꾸기 (0) | 2023.10.09 |
| 값이 NULL인 DATTIME에서 결과를 가져올 때 python mariadb 커넥터 오류 (0) | 2023.10.09 |
| With Embedded YouTube Video, Create Link that Jumps to Specific Time (0) | 2023.10.09 |