Question

在开发单页应用程序时我有些疑惑。

基本上，我有一些驻留在服务器中的html文件。动态地，我将这些文件提取到我的应用程序中。在这种情况下，如何跟踪这些html文件加载的资源？

例如，假设我有index.html。假设我正在获取group.html并将其作为叠加层（或对话框）添加到我的index.html中。在这种情况下，我需要监控这个group.html加载的资源，对吧？因为，它可能正在加载它们所需的一些js，css文件。当我想关闭这个叠加层时，我还必须卸载这些资源。我该如何追踪它们？

另外，$ .get在SPA中真的很有用吗？因为，如果我将一个html附加到我的DOM中，我将如何删除它们？

在SPA中，我应该避免对html元素使用id属性吗？因为，它可能会在页面之间发生冲突，对吧？

Answer 1

老实说，这取决于应用和目的范围。当您最初知道内容将增长但未达到何种程度时，单页应用程序是理想的解决方案。在这种情况下，您可以将内容页面绑定到导航，只需随意添加。

并非没有挑战，但资源管理的一个场景是使用全局变量/对象进行跟踪。这是该概念的一个非常基本的例子。这是一些现有应用程序的基础，因此它可以工作。诀窍是跟踪加载的内容和资源，并管理要调用的onready方法。通常我有一个名为“contentOnReady（）”的函数，它是在内容加载时调用的初始函数，并且作为伪$（文档）.OnReady，就像加载内容时一样，该船已经航行。

var resources = {group:{script:'group.js'}};
var includesPath = 'content/';
var currentLoadedContent = 'defaultpage.html';
var callbackAssigned = false;
var callbackMethod;


    function initContent(){
    callbackAssigned = true;                                        //--set flag for callback
    callbackMethod = function(){onGroupLoad('group loaded');}       //--set function to run on content load callback
    loadContent('group');
}

function loadContent(page){
    if(page != currentLoadedContent){
    currentLoadedContent = page;
        //--retrieve your content   
        $.get(includesPath + page + '.html', function(data) {

            //--based on the page, you can assign specific methods and load any dependencies 
              switch(page){
                  case 'group':
                    $.getScript('scripts/' + resources[page]['script'])
                  break;
              }

              /*
              alternatley you can simply assign a call back prior to loading the content, 
              and then run upon load completion (this example has a delay prior to callback execution,
              which can be helpful if using any jQuery animation functions to allow them to complete)
              */
              if(callbackAssigned){
                window.setTimeout("callbackMethod()",500);  //--run assigned callback function
                callbackAssigned = false;
            }
        });
    }
}

function onGroupLoad(message){
    alert(message);
}

同事在使用.Net时使用的另一个选择是实际将整个页面与所有必要的逻辑放在一起，然后才能获得该页面。可以把它想象成一个自包含的页面，它自己的脚本和资源都被加载和烘焙。需要注意的是资源的路径（例如脚本）。我认为维护起来比较困难，路径很麻烦，但它也可以起作用。

这都是个人偏好，取决于项目。希望这有助于提供另一种观点。

Answer 2

您可以使用正则表达式搜索加载的html文件以查找脚本和css，然后通过将相关行添加到index.html的头部来单独加载这些文件。但是，您最好只有一个javascript文件来处理您网站上的所有页面。

对于ID，您可以使用避免冲突的命名约定。例如：

<div id="page1_id1"></div>

您不必担心卸载资产。浏览器非常擅长垃圾收集。只需确保全局变量名称等方面没有冲突。

Answer 3

如果您需要监控加载的资源，请使用chrome检查器。但是在你的情况下，为什么不在加载index.html时加载所有需要的文件，所以当你要求group.html所有的js和css已经存在？

ID的目的与课程不同。例如，您可以使用ID作为链接，这是类不可能的。

只需在语义上使用ID，一切都会好的。请记住，每个元素只能有一个ID，每个页面只能有一个带有该ID的元素。

在单页面应用程序中加载和卸载资源

3 个答案: