在jQuery中构建html元素的最清晰方法
在jQuery中构建html元素的最清晰方法
提问于 2012-03-19 01:08:36
我见过很多在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 = $("\
" + title + "\
\
" + content + " \
\
\
");
// all in one
// obviously deficient
var $element2 = $("" + title + "" + content + "");
// broken on concatenation
var $element3 = $("" +
title +
"" +
content +
"");
// constructed piecewise
// (I've seen this with nested function calls instead of temp variables)
var $element4 = $("");
var $title = $("").html(title);
var $content = $("").html(content);
$element4.append($title, $content);
$("body").append($element1, $element2, $element3, $element4);请随时演示您可能使用的任何其他方法/样式。
回答 10
Stack Overflow用户
回答已采纳
发布于 2014-02-13 06:18:36
模板很棒，如果你可以在你的项目中访问它们，我建议你使用它们。如果您正在使用
下划线
或者
Lodash
它是内置的。然而，在某些情况下，无论是重构还是测试，您都需要在代码中构建HTML。我发现下面的格式是最清晰的，当这是需求的时候。
注：
HTML规范
允许标记中的属性使用单引号或双引号，所以不要为所有疯狂的转义而烦恼。
this.$fixture = $([
"",
" ",
" ",
" ",
" ",
""
].join("\n"));Stack Overflow用户
发布于 2012-08-17 13:12:55
看了一会儿，我终于找到了我想要的款式。首先，我会说我使用Mustache作为模板，它工作得很好。但是，有时你只需要构建一个元素一次，而不是重用它，或者有其他动机不引入另一个库。在这种情况下，我已经开始使用：
$("body")
.append(
$("")
.append(
$("")
.append(
$("").text(title)
)
)
.append(
$("").text(content)
)
);
This works because append() returns a reference to the object you're appending to, so chained append()s attach to the same object. With proper indentation, the structure of the markup is obvious, and this way it's easy to modify. Obviously this is slower than using templates (the whole thing has to be built piece by piece), but if you're only using it for initialization or something similar then it is a great compromise.
There are many ways one could format a construct like this, but I've chosen a way to make it clear what's going on. The rule I used is that there should be a maximum of one opening parenthesis and/or one closing parenthesis on each line. Also, the leaves of these append trees do not need to be passed to the jQuery constructor, but I've done so here for visual repetition.Stack Overflow用户
发布于 2012-03-19 01:10:48
在构建DOM时，我尽量避免字符串连接，因为它们可能会导致细微的bug和不正确编码的输出。
我喜欢这个：
$('', {
html: $('', {
html: title
}).after(
$('', {
'text': content,
'class': 'content'
})
)
}).appendTo('body');
generates:
...
some titlesome content
and it ensures proper HTML encoding and DOM tree building with matching opening and closing tags.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9760328
复制相关文章
相似问题