管理JavaScript包含文件

Question

Currently we have an extensive web-based office application written in PHP, javascript to manage various processes (billing, ordering, user management, reporting, subscription management, article managementm, warehousing etc.)

The application uses iframes to load pages that perform various functions within the main application interface. From the main page tabs are created so you can access all open pages if needed. Each page has their own javascript include-files, css etc to perform complex tasks. All iframed-pages (around 600) are on the same domain/host.

Since many people describe using iframes as 'evil', I was examining on how I could convert the application into using divs only.

The quesions I have are:

1) in a situation where there are no iframes anymore, do I need to include every used javascript files on the main start page? Or is it possible to dynamically load javascript files into the memory depending on which page you access? (inluding new function declarations etc.)

2) Can these include-files be removed completely out of the memory when someone closes a page? (in this case a div). This to avoid possible conflicts between function names & variables of different files and also not to burden the browser's memory usage.

3) Or perhaps iframes are not that 'evil' afterall, and this is a correct way for using iframes?

thanks for the advise

chees Patrick

Answer 1

have you tried any code or just asking?

you can use jquery ( see here )

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
   console.log(data); //data returned
   console.log(textStatus); //success
   console.log(jqxhr.status); //200
   console.log('Load was performed.');
});

Answer 2

As long as your javascript is modular, you can unload it whenever you want.

In case you don't know, in Javascript functions are objects. And with objects you can do this:

var a = {b:10, c:20, d:30}; //Some memory is allocated for object a
a = null; //Object a will be deleted, and no longer need any memory

How can you use that to handle functions? Here's easiest explanation:

var myFunction = function(a,b,c) {
    alert(a+b+c);
}; //Here we have a function stored in memory
myFunction = null; //And now we don't

You can make whole libraries of functions this way and then remove them with one operation. Example:

var MyMath = {};
MyMath.abs = function(a) {
    return (a<0)?-a:a;
};
MyMath.min = function(a,b) {
    return a>b?b:a;
}; //MyMath uses some memory.
alert(MyMath.min(5,10));
MyMath = null; //Now it does not

So, wrap all of your libraries into objects, and unload those objects whenever you need.

Added:

When your browser sees some new Javascript code - it executes it all at once. It also does save it in memory, but never uses it again (basically it is stored the same way hello is stored in <div>hello</div> ). Therefore the best solution would be:

1) Add <script> tags dynamically to load desired Javascript files on demand. It will look something like:

if (MyMathLibrary == null || MyMathLibrary == undefined) {
    createScriptElementForMathLibrary();
}

alert(MyMathLibrary.calculateEnthropyOfTheUniverse());

2) Whenever you no longer need the library, you just do MyMathLibrary = null . You can also delete it from DOM at this point, it won't do any harm, as I said, it is no more than invisible div at this point.

But honestly, are you sure this is worth the bother? People nowadays write 3D shooters purely in Javascript and computers come with 4-16 GB of memory. Also, it's common practice to first make a working program and bother with optimizations only if it lags. Otherwise it is likely that you will spend a month of work for something no user will ever notice.