CODEWITHSUNDEEP
javascriptjqueryhtml
varunvs
varunvs

Reputation: 895

Loading and unloading resources in single page application

I have some doubts while developing single page applications.

Basically, I have some html files residing in server. Dynamically, I'll fetch these files into my application. In this case, how can I track the resources that are loaded by these html files?

For example, suppose I have index.html. Let's say I'm fetching group.html and adding into my index.html as an overlay (or a dialog). In this case, I need to monitor the resources loaded by this group.html, right? Because, it might be loading some js, css files needed by them. And when I want to close this overlay, I must also unload these resources. How can I track them?

Also, is $.get really useful in SPA? Because, if I append an html into my DOM, how would I remove them?

And also in SPA, should I avoid using id attribute for html elements? Because, it might conflict among pages, right?

Upvotes: 2

Views: 3580

Answers (3)

bphillips
bphillips

Reputation: 459

Honestly it depends on the application and the scope of purpose. A single page application is an ideal solution when you initially know that the content will grow, but not to what extent. In this scenario, you can bind the content pages to the navigation, and simply add at will.

Not without its challenges, but one scenario for resource management is the use of global variables/objects for tracking. This is a very rudimentary example of the concept. This is the basis used for some existing applcations, so it can work. The trick is tracking the loaded content and resource, and managing the onready method to call. Typically I have a function named something like "contentOnReady()" that is the initial function that gets called on content load, and acts as a pseudo $(document).OnReady, as when loading content, that ship has sailed.

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);
}

Another option a co-worker uses when using .Net is to actually put the entire page together with all necessary logic, and then just get that page. Think of it as a self contained page with its own scripts and resources loaded and baked in. The caveat is the pathing of resources (eg scripts). I think it gets harder to maintain, and pathing is a headache, but it can work as well.

It's all personal preference, and depends on the project. Hope that helps give another perspective.

Upvotes: 3

sylwia
sylwia

Reputation: 381

If you need to monitor what resources are loaded use chrome inspector for that. But in your case why don't you load all needed files when loading index.html so when you ask for group.html all js and css are already there?

ID's have different purpose than classes. For example you can use ID as a link which is impossible with classes.

Just use ID's semantically and everything will be fine. Keep in mind that each element can have only one ID and each page can have only one element with that ID.

Upvotes: 0

Rob Johnstone
Rob Johnstone

Reputation: 1734

You can search the loaded html files to look for scripts and css using a regexp and then load these seperately by adding the relevant lines to the head of index.html. However, you are probably best to just have a single javascript file that handles all the pages on your site.

For the ids you can just have a naming convention that avoids conflicts. For example:

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

You shouldn't need to worry about unloading the assets. Browsers are pretty good at garbage collection. Just make sure that there are no conflicts in terms of global variable names and so on.

Upvotes: 0

Related Questions