标签：google-chrome web-applications javascript

我还没有找到一个好的堆栈溢出线程,所以我想引发一场对话.

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

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

有什么想法或建议吗？

解决方法:

您是否正在寻找某种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页面；如果以前已经被获取过,则将使用客户端的本地副本.此外,假设您正在编写现代浏览器,则可以在浏览器中使用本地存储.

作为关于resourcemap的附带说明：

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

标签：google-chrome,web-applications,javascript
来源： https://codeday.me/bug/20191208/2088902.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。