2

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

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

例如，假设我有 index.html。假设我正在获取 group.html 并作为覆盖（或对话框）添加到我的 index.html 中。在这种情况下，我需要监控这个group.html加载的资源，对吗？因为，它可能正在加载一些他们需要的 js、css 文件。而当我想关闭这个覆盖时，我还必须卸载这些资源。我怎样才能追踪它们？

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

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

4

3 回答 3

3

老实说，这取决于应用程序和目的范围。当您最初知道内容会增长但不知道增长到什么程度时，单页应用程序是一个理想的解决方案。在这种场景下，您可以将内容页面绑定到导航，然后随意添加。

并非没有挑战，但资源管理的一种方案是使用全局变量/对象进行跟踪。这是该概念的一个非常基本的示例。这是用于一些现有应用程序的基础，因此它可以工作。诀窍是跟踪加载的内容和资源，并管理要调用的 onread 方法。通常，我有一个名为“contentOnReady()”的函数，它是在内容加载时调用的初始函数，并充当伪 $(document).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 时使用的另一个选项是实际将整个页面与所有必要的逻辑放在一起，然后获取该页面。把它想象成一个自包含的页面，有自己的脚本和资源加载和烘焙。需要注意的是资源的路径（例如脚本）。我认为它变得更难维护，并且路径是一个令人头疼的问题，但它也可以工作。

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

于 2013-05-16T12:25:10.510 回答
0

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

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

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

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

于 2013-05-16T11:52:31.547 回答
0

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

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

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

于 2013-05-16T11:54:13.567 回答