在Javascript中编写HTML的好习惯

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

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

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

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

1> Jaanus..：

---

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

2> bobince..：

---

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

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

我总是看到这样的东西:

$('#mydiv').append('Deleted '+response.title+'!');

要么:

mydiv.innerHTML= '
Renamed to '+response.name+'
;

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

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

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

mydiv.innerHTML= '
Renamed to '+h(response.name)+'
;

但我个人更喜欢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中的新元素创建东西使用了类似的样式.)

---

"DOM很慢"在很大程度上也是一个神话.DOM对于某种操作来说很慢,特别是将大量节点插入到具有大量子节点的元素的childNode列表中.这涉及到列表搜索的负载,并且可以很容易地为O(n²),这是问题出现的地方.规范示例是将行添加到大表中.与文档的其他类型的交互不仅更安全,而且通常比将大量内容序列化为HTML,更改它并重新解析它更快.