bkc*_*rad 69 javascript jquery coding-style element
我在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);
请随意演示您可能使用的任何其他方法/样式.
Bae*_*aer 69
模板很棒,如果你在项目中有权访问它们,我建议你使用它们.如果您使用下划线或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"));
bkc*_*rad 46
环顾四周后,我发现了我最终确定的风格.首先,我会说我使用Mustache进行模板化,效果很好.但有时候,你只需要一次构建一个元素,而不需要重用它,或者有其他动机不要引入另一个库.在这种情况下,我已经开始使用:
$("body")
.append(
$("<div>")
.append(
$("<div>")
.append(
$("<h1>").text(title)
)
)
.append(
$("<div>").text(content)
)
);?
这工作,因为append()返回一个引用,你的对象追加到,所以链式append()s安装到同一个对象.通过适当的缩进,标记的结构是显而易见的,这样很容易修改.显然,这比使用模板慢(整个事情必须要建立一块一块的),但是如果你只使用它的初始化或类似的东西,然后它是一个伟大的妥协.
有很多方法可以格式化这样的结构,但我已经选择了一种方法来清楚地说明发生了什么.我使用的规则是每行最多应有一个左括号和/或一个右括号.此外,这些追加树的叶子不需要传递给jQuery构造函数,但我在这里做了视觉重复.
Dar*_*rov 29
当谈到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树构建,以及匹配的开始和结束标记.
Jul*_*ont 23
我的建议:不要尝试用jQuery构建html元素,这不是它的责任.
使用像Mustache或HandlebarJs这样的Javascript模板系统.
使用非常有限的行数,您可以直接从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);
它比一系列连接更易于维护.
mik*_*ana 13
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>`
小智 7
这是根据贝尔的回答改编的.我觉得它更具可读性,不需要创建和加入数组,不需要在每一行都加上引号:
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
}
)
| 归档时间： |
|
| 查看次数： |
68858 次 |
| 最近记录： |