在Javascript中编写HTML的好习惯

Question

如果人们对动态生成HTML的最佳方式有强烈意见,特别是对于基于Ajax的应用程序,我很想知道这一点.

您是使用服务器端脚本创建HTML代码,然后将其发送到页面,或者只是返回一个JSON字符串并让Javascript完成工作.

在我个人看来,第一种方式将表示层与逻辑方式联系起来太多,使得更改变得更难以维持噩梦.第二种方式,虽然是我的首选方法,但在项目的复杂性增长时也会成为一个噩梦.

我正在考虑使用Javascript模板系统作为另一层,只是为了使代码更健壮,更不严格.任何人都有一个很好的想法,一个轻巧的JS模板系统？

Answer 1

http://ejohn.org/blog/javascript-micro-templating/是一个非常精彩的黑客.最终结果非常干净.

Answer 2

我也更喜欢使用客户端HTML创建逻辑的JSON响应.

不幸的是,大多数真实的客户端HTML编写脚本都被破坏,包含许多HTML注入漏洞,很容易成为跨站点脚本的安全漏洞.我认为,相信是因为你正在与自己的服务器交谈,而不是直接与恶意用户交谈,你在某种程度上是"安全的",并且在将它们插入到HTML中时可以在没有正确字符串的情况下离开.这当然是胡说八道.

我总是看到这样的东西:

$('#mydiv').append('<em>Deleted '+response.title+'!</em>');

要么:

mydiv.innerHTML= '<p>Renamed to '+response.name+'</p>;

或者确实是Resig的微模板黑客,默认情况下没有完成HTML转义.快来上,人!我们刚刚开始清理为服务器端XSS提供服务的破解PHP脚本的遗留问题,现在您想要引入全新的大量客户端XSS攻击吗？

叹.那是弦乐的诱惑.我们认为我们理解它们并且可以毫不犹豫地将它们捆绑在一起.但是字符串是危险的,隐藏的背景和逃避的要求.如果必须在客户端生成HTML,则需要这样的函数:

function h(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
}

mydiv.innerHTML= '<p>Renamed to '+h(response.name)+'</p>;

但我个人更喜欢DOM方法.与SQL的参数化一样,使用DOM方法通过将原始字符串直接与将使用它们的组件进行对话,将字符串索引排除在等式之外.好吧,DOM的问题在于它相当冗长:

var p= document.createElement('p');
p.appendChild(document.createTextNode('Renamed to '+response.name))
mydiv.appendChild(p);

但是你总是可以定义辅助函数来减少它,例如:

mydiv.appendChild(makeElement('p', {}, 'Renamed to'+response.name));

(jQuery 1.4中的新元素创建东西使用了类似的样式.)

Answer 3

如果你想保留 MVC 框架，你应该让你的模板框架来做模板。AJAX 应该只执行服务器请求，该请求执行所有数据库和业务逻辑，然后将 URL 返回到应该加载的模板。