在 Web 应用程序中动态加载“页面”或屏幕的最佳方法

Question

我一直没能找到一个好的堆栈溢出线程，所以我想就此展开讨论。

人们为 Web 应用程序动态加载页面的各种方法或方式是什么？

为了澄清，假设您的 Web 应用程序就像一个电话应用程序 - 您可能有各种屏幕 - 登录屏幕、详细信息屏幕、设置屏幕等。您将如何定义它们，然后在适当的时候？ 我想在单独的文件中为每个页面定义 html，然后在用户“导航”到该页面后加载该特定文件。我不想做一个实际的浏览器导航，而只是交换内容。

有什么想法或建议吗？

Answer 1

我会使用像backbone 或spine 这样的javascript mvc 框架和像mustache 或pure 这样的javascript 模板引擎。在现代浏览器中，您可以使用 history API 来更改不同屏幕上的 url。

Answer 2

HTML 方法：

每个页面都是一个 HTML 文件。当您通过发送 HTTP GET 请求导航到该页面时，服务器会返回该页面并由浏览器呈现。

AJAX 视图：

每个页面只是一个选择视图（尝试EJS），您只有一个页面，可以使用#! urls 或使用HTML5 历史页面来检测url 更改。当 url 发生变化时，您只需向服务器发送一个 ajax GET 请求以获取视图文件并使用 javascript 来呈现页面。

一个简单的例子是绑定到 HTML5 页面更改事件并异步呈现 EJS 视图（这涉及通过 ajax 获取视图文件并在 ajax 请求返回后将其呈现在 DOM 中）

websockets 方式：

使用像SocketStream 这样的框架，你有一个空的登陆页面，它打开一个 TCP 套接字，然后服务器将所有 HTML/CSS 作为单个打包/gzip 压缩文件发送到流中。客户端 javascript 然后呈现 HTML。

当事件发生时，您只需通过 TCP 流向您需要的任何数据发送一条消息，然后获取 javascript 来呈现它。

websocket 方法的优点在于，您可以在应用程序开始时加载整个应用程序 HTML/CSS/JS/Images/Static 内容，并且仅在缓存所有静态内容后通过 TCP 请求请求数据。

Answer 3

我在 StackOverflow 上回答了一个类似的问题，它很详细，所以我不会在这里重新发布。但我认为它完美地回答了你的问题。

Help learning from pivotaltracker's javascript, looking for a high level breakdown

Answer 4

您是否在寻找某种 javascript 延迟加载？

我相信通常会构建一个地图，您可以在其中注册特定资源名称及其相对路径。例如：

    resourcemap = { 
      homepage : "/contextroot/home.html",
      settings : "/contextroot/settings/settings.html",
      details : "/contextroot/details.html"
    };

如果需要，可以通过尝试保持键和实际路径值之间的相关性来进一步采取许多步骤。

最后，你会做类似（伪代码）的事情：

    showPage = function (resource, targetPane) {
      if(resourceMap[resource].cachedResponse)
        targetPane.innerHTML = resourceMap[resource].cachedResponse;
                      else {
        xhrRequest({
          url:resourcemap[resource],
          xhrComplete:function (result) {
            resourcemap[resource].cachedResponse = result;
            targetPane.innerHTML = result;
          }
        });
      }
    }

然后在你的导航事件上（比如按钮点击）：

    showPage("settings",contentElement);

其中 contentElement 是您希望用返回的 HTML 填充的目标 domElement。

如果 html 页面不存在，它将去获取它，或者如果之前已经获取过，则使用客户端的本地副本。此外，假设您正在为现代浏览器编写代码，您可以在浏览器中使用本地存储。

作为资源图的附注：

如果您正确命名资源，那么您可以隐式知道获取 html 所需的 url。 Dojo 工具包提供了很好的例子。以类似方式命名空间可以为您节省一些麻烦，因为您的应用程序的目录结构可用于提供加载路径，而不是手动更新对象。例如，如果您想在 /contextroot/homepage/home.html 加载页面，那么您只需针对 contextroot.homepage.home.html 调用 fetch，而不是在地图中遵循某种手动维护的值。