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);
사용할 수있는 다른 방법 / 스타일을 자유롭게 시연하십시오.
템플릿은 훌륭하며 프로젝트에서 템플릿에 액세스 할 수 있다면 사용하는 것이 좋습니다. Underscore 또는 Lodash를 사용 하는 경우 기본 제공됩니다. 그러나 어떤 경우에는 리팩토링이든 테스트 든 코드에서 HTML을 빌드해야합니다. 아래 형식이 요구 사항 일 때 가장 명확하게 읽을 수 있음을 발견했습니다.
참고 : HTML 사양 은 마크 업의 속성에 대해 작은 따옴표 또는 큰 따옴표를 허용하므로 모든 미친 이스케이프에 신경 쓰지 마세요.
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 생성자에 전달할 필요가 없지만 시각적 반복을 위해 여기에서 수행했습니다.
DOM 구축에 관해서는 미묘한 버그와 적절하게 인코딩되지 않은 출력으로 이어질 수 있으므로 문자열 연결을 피하려고합니다.
난이게 좋아:
$('<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 트리 구축을 보장합니다.
내 충고 : jQuery로 html 요소를 만들려고하지 마십시오. 책임감이 아닙니다.
Mustache 또는 HandlebarJs 와 같은 자바 스크립트 템플릿 시스템을 사용하세요 .
매우 제한된 수의 줄로 Javascript 객체에서 직접 html 요소를 만들 수 있습니다. 복잡하지 않고 2 개의 기능과 템플릿 만 있습니다.
<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이없는 또 다른 예, 순수 Javascript ( 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 대답 : 이전 버전의 브라우저를 사용에 대한 여러 .
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
ES6의 경우 JavaScript 템플릿 문자열 사용
var str = `
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>`
이것은 Baer의 대답에서 채택되었습니다. 더 읽기 쉽고 배열을 만들고 결합 할 필요가 없으며 모든 줄에 따옴표를 붙일 필요가 없습니다.
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 )
FYI, when performance isn't an issue and elements contain a lot of dynamic data, I sometimes just write code like this (note that closure compiler will throw a warning about the unquoted class property, but in modern browsers this works fine):
$(
'<a></a>'
, {
text : this.fileName
, href : this.fileUrl
, target : '_blank'
, class : 'file-link'
, appendTo : this.container
}
)
You could possibly look into javascript view templates:
http://jupiterjs.com/news/jquery-view-client-side-templates-for-jquery
http://javascriptmvc.com/docs.html#!jQuery.View
Here's an example that uses $(htmlString) and mimics the standard layout of HTML code:
function getPage(title, contents) {
return (
$("<div>", {id: "container", class: "box"}).append(
$("<div>", {class: "title"}).append(
$("<h1>").text(title)
),
$("<div>").html(contents)
)
);
}
I find the functional approach very convenient. For instance
// 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']),
]})
now the call
$('#table').append($('<table>', {html: [THEAD, TBODY]}))
yields
<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>edit
I have refined my approach, now available for instance as html_uty.js
참고URL : https://stackoverflow.com/questions/9760328/clearest-way-to-build-html-elements-in-jquery
'Nice programing' 카테고리의 다른 글
| 오프라인 모드에 대한 Maven 명령 줄 옵션이 있습니까? (0) | 2020.11.06 |
|---|---|
| 파이썬은 정수를 다음 100으로 반올림합니다. (0) | 2020.11.06 |
| 숨겨진 입력을 갖는 Django ModelForm (0) | 2020.11.06 |
| Android Google Maps API V2 현재 위치로 확대 (0) | 2020.11.06 |
| 조건이 충족되면 Numpy 요소 교체 (0) | 2020.11.06 |