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转义。人们来吧 on ！我们刚刚开始清理为服务器端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

1。1年前，我们启动了一个新的Web应用程序，并且需要一种在浏览器中从JSON数据呈现HTML的方法。我们希望它与XML / XSLT转换一样快。

我们对此的回答是JS模板引擎PURE。

与大多数JS模板库不同，它保持HTML不受影响（根本没有奇怪的标签），除了一些符号，它不会带来新的语言学习，只有JS和HTML。

我使用它的方式：

直接在页面中构建静态HTML
然后逐步添加JS逻辑，HTML逐渐变为活着
一旦习惯了，HTML和JS都可以拥有安全的独立开发生活，可以在设计师和JS开发人员之间进行分工

Answer 4

我们有一个系统，其中大量数据作为JSON从服务器传递，然后通过客户端的javascript模板引擎处理。在.Net 4.0中（甚至可能是3.5 sp1，我不确定），这可以使用Client Templates来完成。

我更喜欢将JSON传递给发送html。将数据和视图分开是一件好事。

Answer 5

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

在Javascript中编写HTML的好习惯

5 个答案: