0

我们正在开发一个动态仪表板，它与我们的 twitter 帐户下的 twitter 设置面板非常相似。由于仪表板有很多控件，因此动态填充了很多内容。所以目前我们就是这样做的。

这是我左侧面板中的菜单之一：

<a href="javascript:void(0);" onclick="fnGetFiles();">Files</a>

这是获取 HTML 的调用函数：

function fnGetFiles(){
  $('#mainDashboard').html('<div class="rightContainer"><div class="tabLoader"></div></div><div class="clear"></div>');
  $.get(USER_DASHBOARD+'file_share/files.php',function(data){
  $('#mainDashboard').html(data);
});

所以我们基本上直接附加（附加）HTML。但我刚刚浏览了 twitter 仪表板在此处输入图像描述
首先是他们为在左侧不同菜单之间导航所做的 URL 处理（添加图像以供参考）。它只是动态变化，内容是已加载。在检查代码时，我注意到它们将 html 作为 JSON 字符串发送。
我不太确定，但这是否以任何方式提高性能？我的生产有点差，想知道我可以利用哪些框架来实现类似的东西（另外，我面临脚本之间的 AJAX 冲突问题).我正在为我的应用程序使用PHP、jquery。
我试图从dev.twitter.com获取信息，和博客，但找不到任何关于此的具体信息。
如果可能的话，请尝试指导我并阐明它。
感谢您的时间。

4

1 回答 1

1

您的 HTML、JavaScript、图像和其他客户端元素都是静态的。他们应该保持这种状态。您不需要在 JavaScript 中动态创建任何元素。

您的 AJAX 调用只需要关闭，获取填充 HTML 所需的数据，然后将此数据添加到 DOM。JSON / XML 就像一个协议：

通信协议必须得到相关各方的同意。

对于您的 JS > PHP > JS，JSON 是一个很好的“协议”（约定的通信方法）可供选择，因为它设置了一个标准，并且您只需在 PHP 中使用json_encode()/ json_decode()，$.parseJSON()如果您使用的是 jQuery。使用 JSON 只是一种公认​​的消息格式，作为开发人员，您应该承诺使用它，因为它是一种“标准”。

您不想通过线路发送任何您不需要的额外数据。除非需要，否则不要发送 HTML。仅使用您需要的数据请求和响应。

无需在这里过多地咆哮，有很多很棒的工具可以帮助你做这样的事情。例如，AngularJS 允许您使用从服务器返回的 JSON 自动更新 DOM，通过使用ng-repeat. 这基本上意味着您不必编写任何自定义 JavaScript 来使用从服务器检索到的数据填充 DOM 元素（您的仪表板和我的仪表板目前都在这样做）。

除此之外，我正在使用 websockets，因为触发大量 AJAX 请求以获取实时数据并不是这些 AJAX 请求的目的。如果你只需要每 5 到 10 秒一次的数据，那很好，但比这更频繁，并且你想要一些双向技术，比如 websockets，这需要你学习 React PHP 和 Ratchet 之类的东西来实现（当你开始工作时） ，但是，它很棒）。

首先，就您的客户端和服务器端都将使用的“协议”达成一致。然后，只发送和接收您需要的数据，以及发生变化的数据。其他任何东西都是静态的，只会浪费带宽。不要传递 HTML。最后，在速度方面，发送 JSON 与发送纯文本 - 这实际上取决于您发送的字符长度。就是这样。无论如何，无论哪种方式，这些收益都是微不足道的，以至于您无需担心它们，除非您发送的是 HTML，而您不是。你是。

于 2013-11-18T14:01:42.403 回答