Question

我无法在此找到一个好的堆栈溢出线程，因此我想在其上激发一个对话。

人们为Web应用程序动态加载页面有哪些方法或方法？

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

有任何想法或建议吗？

Answer 1

我使用javascript mvc框架，如主干或脊椎和javascript模板引擎，如胡子或纯。在现代浏览器中，您可以使用历史记录API在不同的屏幕上更改网址。

Answer 2

HTML方法：

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

AJAX观点：

每个页面只是一个选择视图（尝试EJS），您只有一个页面并使用#!网址或使用HTML5历史记录页来检测网址更改。当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请求请求数据。 / p>

Answer 3

你在寻找某种javascript延迟加载吗？

我认为通常会构建一个映射，您可以使用其相对路径注册特定的资源名称。例如：

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

如果需要，尝试在密钥和实际路径值之间保持相关性，可以采取更多步骤。

最后，你会做类似的事（psuedocode）：

    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页面，或者如果之前已经提取过，则使用客户端的本地副本。此外，您可以使用浏览器中的本地存储，假设您正在为现代浏览器编写。

关于资源地图的附注：

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

Answer 4

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

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

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

4 个答案: