Javascript 如何构建Facebook风格的Ajax站点

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

我想要的是关于如何开发一个以Ajax为主的网站的建议，其中UI的部分是异步加载的。这里有一个陷阱：我希望浏览器的后退/前进按钮能够直观地工作——这是Facebook非常成功的一点

有人知道Facebook使用什么库和设计模式吗？考虑到他们的工作做得很出色，将他们作为榜样，而不是试图重新发明轮子，这将是非常有意义的

我注意到url哈希中有很多内容：

我相信他们这样做一定有很好的理由，如果这是我可以利用的东西，我也不会感到惊讶。有人能指出他们在这里完成了什么，以及这些

的每一部分吗？#/home.php？sk=bd

用于？我特别惊讶地看到

home.php？sk=bd

，当加载的原始页面是

home.php

——这是否可能是他们允许链接到特定“页面”的方式，尽管整个页面都由

home.php

提供服务

每一个问题都被解决并不是那么重要——我只是想告诉大家我在理解“大局”方面遇到了什么困难——如果你愿意的话。如果有人能给我一个更全面的答案，那就太棒了（特别是如果你能告诉我如何使用ASP.NET MVC实现这一点）

---

提前谢谢

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

服务器只通过JSON数据与浏览器进行讨论。
XML消息也可以，但在所有浏览器中都很难处理。

前端仅由静态文件构建：HTML、CSS、JS。服务器只处理数据库的安全性和事务。
所有HTML都是通过Javascript模板引擎在客户端呈现的，它将HTML视图和JS逻辑完全分离。

对于导航，我们使用散列键（#）作为应用程序的状态。用户在看什么人。在测试了许多解决方案之后，我们最终构建了一个非常简单的解决方案，使用120ms的

setInterval

轮询来检查哈希键的值是否有任何更改

该应用程序响应速度非常快，导航也非常直观

编辑：

---

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

window.onhashchange

我使用的技术类似于Mic。我的工具包的重要部分：

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

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

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

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

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

• 小部件之间通信的事件系统。我正在构建的软件是一个联系人管理系统。如果我有一个小部件列出用户的所有联系人，另一个小部件允许用户添加和删除联系人，则需要通知联系人列表小部件发生更改。而不是add contact“widget保持对依赖于联系人列表的所有其他功能的感知，我使用jquery的事件系统向类为“contactsChangedListener”的任何dom对象发送“contactsChanged”事件