如何解决在JavaScript文件中包含HTML的优雅简洁方法？
| 我正在构建一个带有一些模式对话框窗口的小型应用程序。窗口需要一点HTML。我已经在JavaScript库中对窗口HTML进行了硬编码，但对此解决方案并不感到兴奋。有没有更优雅的方法可以做到这一点？似乎JavaScript没有多行字符串/ heredoc语法。var html = \"<div id=\'email_window\'><h2>Email Share</h2><div>\";
html = html + \"<form action=\'javascript:emailDone();\' method=\'post\'>\";
html = html + \"<div><label for=\'to\'>To</label><input id=\'to\' type=\'text\'></div>\";
html = html + \"<div><label for=\'from\'>From</label><input id=\'from\' type=\'text\' value=\'\" + email + \"\'></div>\";
html = html + \"<div><label for=\'subject\'>Subject</label><input id=\'subject\' type=\'text\' disabled=\'disabled\' value=\'\" + subject + \"\'></div>\";
html = html + \"<div><label for=\'body\'>Body</label><input id=\'body\' type=\'text\' disabled=\'disabled\' value=\'\" + body + \"\'></div>\";
html = html + \"<div><input type=\'submit\' value=\'Send\'><input type=\'button\' value=\'Cancel\' onClick=\'javascript:$.fancybox.close();\'></div>\";
html = html + \"</form></div>\";
$(\"#data\").html(html);
http://www.bar.com - index.html
<html>
...
<script type=\"text/javascript\" src=\"http://www.foo.com/sharetool.js\"></script>
...
<body>
<div sharetool=\"true\">
</div>
...
</html>
解决方法
模板。选择你的毒药
EJS
jQuery模板（nb：开发已终止）
下划线模板
胡子
jResig微型模板
内联它们作为脚本块，或者使用ajax作为外部资源加载它们。
我个人使用EJS作为外部模板文件，只是让EJS加载它们并将它们注入到具有绑定到模板的json数据的容器中。
new EJS({
url: \"url/to/view\"
}).update(\'html_container_name\',{
\"foobar\": \"Suprise\"
});
// url/to/view
<p> <%=foobar %></p>
<div id=\'container\' style=\'display: none;\'>
<div id=\'your-dialog-box-contents\'>
...
...
</div>
</div>
<script type=\'text/javascript\'>
$(\"#from\").val(from);
$(\"#subject\").val(subject);
$(\"#body\").val(body);
$(\"#data\").html($(\"#your-dialog-box-contents\"));
</script>
String.prototype.template = String.prototype.template ||
function (){
var args = Array.prototype.slice.call(arguments),str = this,i=0
;
function replacer(a){
var aa = parseInt(a.substr(1),10)-1;
return args[aa];
}
return str.replace(/(\\$\\d+)/gm,replacer)
};
//basic usage:
\'some #1\'.template(\'string\'); //=> some string
//your \'html\' could look like:
var html =
[ \'<form action=\"javascript:emailDone();\" method=\"post\">\',\' <div><label for=\"to\">To</label>\',\' <input id=\"to\" type=\"text\"></div>\',\' <div><label for=\"from\">From</label>\',\' <input id=\"from\" type=\"text\" \',\' value=\"$0\"></div>\',\' <div><label for=\"subject\">Subject</label>\',\' <input id=\"subject\" type=\"text\" disabled=\"disabled\" \',\' value=\"$1\"></div>\',\' <div><label for=\"body\">Body</label>\',\' <input id=\"body\" type=\"text\" disabled=\"disabled\" \',\' value=\"$2\"></div>\',\' <div><input type=\"submit\" value=\"Send\"><input type=\"button\" \',\' value=\"Cancel\" \',\' onClick=\"javascript:$.fancybox.close();\"></div>\',\'</form>\'
] .join(\'\').template(email,subject,body);
\\
var tpl = \"hello\\
stackoverflow\\
World !\";
body.innerHTML
$(\'#data\').html(
$(\'<div/>\',{
id: \'email_window\',html: $(\'<h2/>\',{
html: \'Email Share\'
})
}).after(
$(\'<form/>\',{
action: \'javascript:emailDone();\',method: \'post\',html: $(\'<div/>\',{
html: $(\'<label/>\',{
for: \'to\',html: \'To\'
}).after($(\'<input/>\',{
id: \'to\',type: \'text\'
}))
}).after(
... etc
)
})
)
);
<div style=\"display:none;\">
<form method=\'post\' class=\"email\">
<input id=\'from\' type=\'text\'> <!-- other form fields omitted for brevity -->
</form>
<form method=\'post\' class=\"facebook\"></form> <!-- again,omitted for brevity -->
</div>
$(\'#data\').html($(\'form.email\').find(\'input#from\').val(email).end().html());
div([
button({click:[firstEvent,secondEvent]},\'You can bind (attach) events on the fly.\'),p(\'Here are some popular search engines\'),ul([
li([
a(\'Google\',{href:\'http://www.google.com\'})
]),li([
a(\'Bing\',{href:\'http://www.bing.com\'})
]),li([
a(\'Yahoo\',{href:\'http://www.yahoo.com\'})
])
])
]);
Objects = Attribute & Events
-> {href:\'facebook.com\',src:\'static/cat.gif\',ng-bind:\'blah\'}
String = Text or Html
-> \'hello world\'
Array = Elements
-> [a(\'hello world\',{href:\'facebook.com\'}),img({src:\'static/cat.gif\'})]
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。