javascript - 在 Web 应用程序中动态加载 'pages' 或屏幕的最佳方法

Question

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

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

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

有什么想法或建议吗？

Answer 1

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

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

    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 的提取，而不是映射中的以下某种手动维护的值。