如何构建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 we的setInterval轮询来检查哈希键的值以进行任何更改。

该应用程序非常响应和导航非常直观。

编辑：

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

Answer 2

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

• 一个javascript构建系统。我使用ant将我所有的小js源文件滚动到一个大的最终文件中。这样，我就可以将我的文件保持在我想要的大小，而不必担心必须将100多个独立的脚本导入浏览器。
• 一个模板引擎。，我正在使用Trimpath，并且对它非常满意。除了Trimpath之外，我还开发了自己的系统，用于处理包含和模板继承，用于在传递到Trimpath之前处理模板代码。
• ：模板文件的预处理程序，它将多行字符串转换为有效的javascript.通过这种方式，我可以编写常规的多行html，将其交给我的脚本，脚本将其转换为javascript，然后将我的模板滚动到主js文件中，而不必单独提供它们。
• 用于处理异步调用的技术。在许多情况下，为了呈现屏幕，我需要确保加载了dataA、dataB和dataC。与其创建服务器端调用"fetchDataABandC"，不如使用客户端函数指定"do A、B和C，并在所有调用完成后调用此回调“。我也可以指定“做A然后B然后C，顺序”。我发现自己正在做的另一件事是设置函数，以便它们可以很容易地切换到异步调用。因此，通常情况下，每当我有一个获取数据的函数，而不是让该函数返回一个值时，我就传递一个回调。例如，如果我将一些数据存储在cookie中，然后我决定将数据移动到服务器，如果我用来获取和设置数据的函数是基于回调的，那么使用服务器调用来交换实现很容易。
• 一种缓存机制。所有的服务器调用都是通过一个“服务”对象访问的。我有一个缓存对象，它包装服务对象，复制对象的每个方法，并添加一个名为{methodName}缓存的额外方法。因此，如果原始服务对象有一个名为"getSubscriberDetails“的方法，缓存对象将动态地为自己创建一个"getSubscriberDetails”方法，该方法链接到原始数据，并创建一个"getSubscriberDetailsCached“方法，如果存在缓存数据，该方法将返回缓存的数据，但否则将调用原始函数(并缓存其返回的数据)。在内部，缓存使用方法名称和方法参数生成的键存储数据，因此如果我调用与cache.getSubscriberDetailsCached("subscriber1")，不同的cache.getSubscriberDetailsCached("subscriber2").
• 是一个在小部件之间进行通信的事件系统。我正在构建的软件是一个联系人管理系统。如果我有一个列出用户所有联系人的小部件，以及另一个允许用户添加和删除联系人的小部件，则需要通知联系人列表小部件发生了哪些更改。与其让"add“小部件了解依赖于联系人列表的其他功能，不如使用jquery的事件系统将"contactsChanged”事件发送给具有类"contactsChangedListener“的add对象。因此，我的“联系人列表”小部件在其最外层的div中有"contactssChangedListener“类，我通过jQuery.bind在”联系人列表“控制器中附加了一个侦听器。当"contactsChanged“事件被发送出去时，我的”联系人列表“小部件知道它需要刷新联系人列表。
• 基于 hash的导航。我正在使用jquery哈希变换插件来帮助我侦听哈希更改。每个屏幕都与一个单独的url相关联，您从一个屏幕移动到另一个屏幕的方式是通过更改url。不过，我不使用直接链接。每个导航操作都经过一个导航器对象，该对象可以配置为弹出一条警告消息，告诉用户他们即将失去未保存的更改。