我们正在开发一个动态仪表板,它与我们的 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 仪表板 enter image description here
首先是他们用于在左侧不同菜单之间导航的 URL 处理(添加图像以供参考)。它只是动态更改并加载内容。 检查 我注意到他们将 html 作为 JSON 字符串发送的代码。
我不太确定但是这样做 提高性能 无论如何?我的制作有点差,想确切地知道我可以利用哪些框架来实现与此类似的东西(另外,我面临脚本之间的 AJAX 冲突问题)。我在用 PHP、jquery 对于我的申请。
我试图从中获取信息 dev.twitter.com,和博客 但找不到这方面的任何具体信息。
如果可能的话,请尝试指导我并阐明它。
感谢您的时间。

有帮助吗?

解决方案

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

您的 AJAX 调用只需要启动即可 填充 HTML 所需的数据, ,并将此数据添加到 DOM。JSON / XML 就像一个协议:

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

对于 JS > PHP > JS,JSON 是一个很好的“协议”(约定的通信方法)可供选择,因为它设定了一个标准,并且您只需使用 json_encode() / json_decode() 在你的 PHP 中,以及 $.parseJSON() 如果你使用的是 jQuery。使用 JSON 只是一种商定的消息传递格式,实际上作为开发人员,您应该致力于使用它,因为它是“标准”。

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

无需在这里过多咆哮,有许多很棒的工具可以帮助您完成此类操作。例如,AngularJS 允许您通过使用以下语句,使用从服务器返回的 JSON 自动更新 DOM ng-repeat. 。这基本上意味着您不必编写任何自定义 JavaScript 来使用从服务器检索的数据(您的仪表板和 我的 仪表板目前正在做)。

除此之外,我还使用 websockets,因为发出大量 AJAX 请求来获取实时数据并不是这些 AJAX 请求的目的。如果你只需要每 5 - 10 秒一次数据,没问题,但比这更频繁,并且你想要一些双向技术,如 websockets,这将需要你学习 React PHP 和 Ratchet 之类的东西来实现(当你让它工作时) ,但是,这太棒了)。

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

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top