优雅干净的方式在JavaScript文件中包含HTML？
我正在构建一个带有几个模态对话窗口的小应用程序。 窗口需要一点点HTML。 我已经在javascript库中对窗口HTML进行了硬编码，但对此解决方案并不满意。 有没有更优雅的方式来做到这一点？ 似乎JavaScript没有多行字符串/ heredoc语法。
var html = "Email Share
"; html = html + ""; $("#data").html(html);
添加以澄清原始消息 –
任何解决方案都不能使用Ajax / XHR来提取模板文件，因为javascript库将位于不同的域中，它所包含的html文件有点像ShareThis。 该库将包含在许多不同的站点上，并附加到div中任何锚标记的onClick事件，其属性为sharetool =“true”。
例如：
http://www.bar.com - index.html ... ... ...
模板。 选择你的毒药
- EJS
- jQuery模板 （nb： 开发停止 ）
- 下划线模板
- 胡子
- jResig微模板
将它们内联为脚本块或使用ajax作为外部资源加载它们。
我个人使用EJS作为外部模板文件，只是让EJS加载它们并将它们注入到一个容器中，json数据绑定到模板。
new EJS({ url: "url/to/view" }).update('html_container_name', { "foobar": "Suprise" });
然后查看文件使用通用视图逻辑。
// url/to/view <%=foobar %>
您可以将HTML作为常规标记包含在页面的末尾，在不可见的div中。 然后你就可以用jQuery引用它了。
然后，您需要以编程方式设置您的变量字段（电子邮件，主题，正文）
对于多行字符串（没有框架，只是javascript），有几种解决方案。 请参阅我对此SO问题的回答 。 你可以将它与一些简单的模板结合起来：
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 = [ '' ] .join('').template(email, subject, body);
你的问题有2个解决方案： – javascript中heredoc语法的替代方法是使用\来转义换行符：
var tpl = "hello\ stackoverflow\ World !";
char被转义为被忽略，并且它不会在结果字符串中发生。
您还可以使用模板创建一个普通的html文件，并在js脚本中创建一个隐藏的iframe并加载crossdomain html模板。 您现在可以访问iframe的文档对象并检索body.innerHTML 。 理论上！ 我还没有测试过这个解决方案….
就个人而言，我喜欢像这样构建DOM树：
$('#data').html( $('', { id: 'email_window', html: $('', { html: 'Email Share' }) }).after( $('', { action: 'javascript:emailDone();', method: 'post', html: $('', { html: $('', { for: 'to', html: 'To' }).after($('', { id: 'to', type: 'text' })) }).after( ... etc ) }) ) );
你是对的，JS没有heredocs或多行字符串。 也就是说，通常的方法是将HTML放在HTML中，并在适当的时候显示或隐藏它。 你已经在使用jQuery了，所以你大部分都在那里：
然后，您可以填充表单并将其放在正确的位置：
$('#data').html($('form.email').find('input#from').val(email).end().html());
Cook.js
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'})]
更多关于cook.js！