我正在构建一个AJAX“Web应用程序”，一旦加载了UI，对服务器的调用仅用于“数据交换”。因此，许多UI操作将使用Javascript完成。假设Javascript使用AJAX从服务器检索包含多个字段的一些数据。把它放在屏幕上我可以想到多种方法 -
并且可能有更多方法。
您是否可以从跨浏览器支持，性能和编码复杂性的角度分享这些方法中的优缺点和缺点？
有些相关问题：Is client-side UI rendering via Javascript a good idea?
感谢。
答案 0 :(得分：5)
好的，让我们开始吧：
首先，您需要花时间学习JS工具包。虽然其他人认为原生JS是好的（它确实是这样），但是你不想浪费时间构建不能跨浏览器工作的应用程序或花费太多时间测试它。社区中的人们花时间为您做这件事。向开放社区展示一些爱并使用他们的产品。我个人使用jQuery，但还有其他人使用Dojo和YUI。
但是尽可能使用本机JS。它仍然更快。
在工具包之后，您需要一些结构。 BackboneJS会照顾到这一点。这是为了构建你的代码，以便你的代码可以重复使用......不会最终成为你屏幕上的意大利面条。其他工具如RequireJS对于那些需要运行其他脚本的脚本也很有用。
然后，有了这个，你现在有了一个工具包，但你仍然需要构建界面。如果您使用Mustache或Handlebars等模板引擎，效果会更好。这些从字符串呈现UI的模板（是的，HTML的纯字符串）。只需从服务器发送模板数据，将其存储在您的应用程序中（在变量或浏览器localstorage中），并在必要时重复使用它。无需克隆隐藏节点！
至于接近DOM， 您应该只在必要时触摸DOM 。 DOM很慢，操纵它是他慢啊！这意味着你应该避免不必要的动画，避免过多的元素追加和删除，以及改变样式。查看有关avoiding too much reflow and repaints的文章。面对它，用户不会注意到你的盒子的圆角或渐变背景，甚至不关心你是否做了幻灯片动画或淡出。他们想要的是完成工作，而不是喜欢烟花汇演。
此外，删除屏幕上没有的任何内容。您最终可能会在屏幕上显示20％的内容，并且屏幕显示80％的折扣 - 浪费内存。
现在，您的应用程序变得越来越重，您想要削减一些HTTP请求。您可以通过缓存来完成此操作。我通常主要在模板上使用缓存，这样每个新UI都不需要再次从服务器加载。您可以通过在对象中存储内容来完成此操作。您可以更进一步，并在可用时使用浏览器的localStorage。
缓存不是网络的全部。假设您稍后要使用一些复杂的计算，或者未完成的某些文本，也可以使用缓存。
在使用AJAX减轻您的应用程序的同时，您将不可避免地想要在任何地方使用AJAX - 不要滥用它。通常我会看到那些积极轮询服务器的人（每半秒或更短时间）。这不仅会对服务器造成压力（请求太多），还会影响浏览器（浪费处理周期）和网络（带宽）。现在有几种做法可以避免添加HTTP请求：
Image Spriting - 将大量图像放入一张图像并使用背景位置更改图像的艺术。肯定会击败100个单独的HTTP请求
Use JSON用于文本数据--AJAX意在使用XML ..然后出现了JSON，它是一种无脂肪，独立于平台的结构化数据格式。
不返回HTML格式的数据 - 通过免除模板（HTML 字符串），您不应该通过网络返回HTML格式的数据。让JS在客户端执行JSON +模板。
答案 1 :(得分：1)
我正在构建一个类似的应用程序（轻量级CMS）
在我看来，您采取的方法将取决于您从服务器发送的数据的复杂性＆gt; <在客户端操纵>并返回服务器和db。
我正在研究的cms非常基本，不需要在客户端进行繁重的操作。 TinyMCE尽其所能。
最初我是通过echo <input>从php构建客户端管理区域，然后通过解析DOM收集数据，转换为JSON并将AJAX转换回服务器（{{3} }）
当然，这需要用户在编辑或添加新数据后点击“保存”。
我后来决定我需要的东西比那更响应和更简单所以我现在重新实现I found this code very helpful的所有内容，只要客户端在该特定字段上“OK”，就会对数据进行AJAX操作。不需要“主要保存”。
总结它真的是一个非常未知的领域。我的意思是，在我看来，业内人士不喜欢模糊后端和前端之间的界限，并找到“一个解决方案”来完成整个DB＆gt; SERVER＆gt; CLIENT＆gt; SERVER＆gt;数据库操作。 / p>
我很想知道你是如何解决问题的。
只需2美分。