如何构建 Facebook 风格的 Ajax 站点

Question

我知道标题有点模糊和包罗万象，所以请让我试着缩小范围。

我想要的是关于如何开发一个主要是 Ajax 的网站的建议，其中部分 UI 是异步加载的。关键是：我想让浏览器的后退/前进按钮直观地工作——Facebook 已经做得很好。

有人知道 Facebook 使用哪些库和设计模式吗？考虑到他们做得很好，将它们用作模型会很有意义，而不是试图重新发明轮子。

我注意到 url 哈希中有很多内容：
http://www.facebook.com/home.php?#!/home.php?sk=bd

我确信他们这样做一定有充分的理由，如果我可以利用它，我不会感到惊讶。有人能指出他们在这里完成了什么，以及?#!/home.php?sk=bd 的每一部分的用途吗？我特别惊讶地看到home.php?sk=bd，当加载的原始页面是home.php - 这也许是他们允许链接到特定“页面”的方式，尽管整个事情都是由home.php提供的？

解决每个问题并不那么重要 - 我只是想传达我无法理解的问题 - 如果您愿意的话，请了解“更大的图景”。如果有人能给我一个更全面的答案，那就太棒了（尤其是如果你能告诉我如何使用 ASP.NET MVC 来完成）。

提前致谢！

Answer 1

我们已经构建了一个如您所描述的应用程序，这是我们最终所做的：

1. 服务器仅通过 JSON 数据与浏览器进行讨论。
   XML 消息传递也可以，但在所有浏览器中都难以处理。
    
2. 前端仅由静态文件构建：HTML、CSS、JS。服务器仅处理数据库的安全性和事务。
   所有 HTML 都使用 pure.js Javascript 模板引擎在客户端呈现，它将 HTML 视图和 JS 逻辑清晰地分开。
    
3. 对于导航，我们使用哈希键 (#) 作为应用程序的状态。例如：用户正在看什么人。在测试了许多解决方案之后，我们最终构建了一个非常简单的解决方案，使用 120 毫秒的 setInterval 轮询，检查哈希键的值是否有任何变化。

该应用反应灵敏，导航非常直观。

编辑：
由于我们放弃了对 IE6 和 IE7 的支持，我们不再轮询哈希更改，而是使用 window.onhashchange

Answer 2

我正在使用与 Mic 类似的技术。我的工具包的基本部分：

• 一个 javascript 构建系统。我使用 ant 将我所有的小 js 源文件滚动到一个大的最终文件中。通过这种方式，我可以将文件保持在尽可能小的大小，而不必担心必须将 100 个单独的脚本导入浏览器。

• 模板引擎。我正在使用Trimpath，对它非常满意。除了 Trimpath，我还开发了自己的系统来处理包含和模板继承，我用它来处理我的模板代码，然后再交给 Trimpath。

• 模板文件预处理器，可将多行字符串转换为有效的 javascript。这样，我可以编写常规的多行 html，将其交给我的脚本，脚本将其转换为 javascript，然后可以将我的模板滚动到主 js 文件中，而不必单独提供它们。

  李>

• 处理异步调用的技术。 在很多情况下，为了渲染屏幕，我需要确保加载了 dataA、dataB 和 dataC。我没有创建服务器端调用“fetchDataABandC”，而是有一个客户端函数，我可以使用它指定“执行 A、B 和 C，并在全部完成后调用此回调”。我还可以指定“依次执行 A 然后 B 然后 C”。我发现自己经常做的另一件事是设置函数，以便可以轻松地将它们转换为异步调用。所以，一般来说，任何时候我有一个获取数据的函数，而不是让该函数返回一个值，我都会传递一个回调。例如，如果我将一些数据存储在 cookie 中，然后我决定将这些数据移动到服务器，如果我用来获取和设置数据的函数是基于回调的，则很容易换出通过服务器调用实现。

• 一种缓存机制。我所有的服务器调用都是通过一个“服务”对象访问的。我有一个缓存对象，它包装了服务对象，复制了对象的每个方法，并添加了一个名为 {methodName}Cached 的附加方法。所以如果原始服务对象有一个名为“getSubscriberDetails”的方法，缓存对象会为自己动态创建一个“getSubscriberDetails”方法，链接回原来的，还有一个“getSubscriberDetailsCached”方法，如果它返回缓存数据存在，但会调用原始函数（并缓存它返回的数据）。在内部，缓存使用方法名称和方法参数生成的键存储数据，所以如果我调用 cache.getSubscriberDetailsCached("subscriber1")，这与 cache.getSubscriberDetailsCached("subscriber2") 不同。

• 一个在小部件之间进行通信的事件系统。 我正在构建的软件是一个联系人管理系统。如果我有一个列出所有用户联系人的小部件，以及另一个允许用户添加和删除联系人的小部件，则需要通知联系人列表小部件发生了哪些更改。我没有让“添加联系人”小部件了解依赖于联系人列表的所有其他功能，而是使用 jquery 的事件系统向具有类“contactsChangedListener”的任何 dom 对象发送“contactsChanged”事件.因此，我的“联系人列表”小部件在其最外层的 div 中有“contactssChangedListener”类，并且我通过 jQuery.bind 在“联系人列表”控制器中附加了一个监听器。当发送“contactsChanged”事件时，我的“联系人列表”小部件知道它需要刷新其联系人列表。

• 基于哈希的导航。我正在使用jquery hashchange 插件来帮助我侦听哈希更改。每个屏幕都与一个单独的 url 相关联，从一个屏幕移动到另一个屏幕的方式是更改 url。我不使用直接链接。每个导航操作都通过一个导航器对象，该对象可以配置为执行诸如弹出警告消息告诉用户他们即将丢失未保存的更改之类的事情。