Dynamic load, cache, update and reuse of JS (i)

Use range:

OA, MIS, ERP and other information management projects, the site is not considered for the time being.

the problems encountered:

To complete a project, often need to refer to a lot of JS files, such as Jquery.js, Easyui and so on. Also have their own write some of the column JS file, then these files how to facilitate the loading, if the file changes how to allow the client to update the cache in a timely manner? If you can improve the efficiency of the operation of the point, it would be better.

Target:

1, can be convenient to refer to JS files.

2, try to use a variety of caching, to avoid frequent reading from the server files.

3, if the JS file has updated or increased, reduce a few JS files, need to be able to automatically update the client.

4, JS file reuse.

page Structure:

General OA, MIS this kind of project, mostly adopt frameset or IFRAME way to realize, this has the concept of the parent page and the child page. We can use this to make a fuss.

The Web page can be divided into three pieces: Shell, home page, label, data list, form (add, modify). Because here to say the loading of JS method, need to take advantage of this page structure, it is because of this reason, so temporarily do not support the site.

This picture looks a bit familiar to me. Well, that's the structure.

　　

Body

Now do the web version of the application, more and more rely on a variety of JS, the third party jquery, Easyui, my97, and so on, but also wrote a variety of JS. To achieve more and more functions, need to use more and more JS, JS file changes are also very frequent. So there are a lot of problems, such as every page to write a lot of <script src= "" >. This also is too troublesome, add a new JS file, need to change how many pages? JS file update How to let the client also update immediately? How to let the client load JS faster. Some JS files also have dependencies, how to ensure the loading sequence? The content of this article is to share my solution.

Dynamic loading

Use <script> load JS in the page, obviously very troublesome, then how to do? Think about it or use the dynamic loading method to solve. Also search on the Internet, there are many ways, have their own manual writing, have organized into a framework (such as Seejs). Sometimes I feel like I have a more should also launch, so I intend to write a set of my own.

How do I load it dynamically? Do you use the method provided by jquery? This is OK, but the page must refer to jquery and I wrote JS to load the JS file. That is to say a page to write two <script> Can write one, you must not write two, although just one more, but a lot of such a is really very troublesome. So decided to write a dynamic load of their own small method.

What if I can't write it? Baidu aunt to help you. All kinds of search Ah, finally found a more ideal method, en use this.

* Implementation of dynamic load JS function, from the Internet, made a little modification, can be compatible with IE10/var loadscript = {    $$: function (ID) {return document.geteleme Ntbyid (ID); },     tag:function (Element) {return document.getelementsbytagname (element);},     CE: function (Element) {return document.createelement (element);},     js:function (URL, callback) { &
nbsp;      var s = loadscript.ce ("script");
        S.type = "Text/javascript";
        s.src = URL;         if (Document.documentmode = = Document.documentmode = 9) {  &
nbsp;         S.onerror = S.onload = loaded;        } else {          
  S.onreadystatechange = ready;             S.onerror = S.onload = loaded;        }         Loadscript.tag ("head") [0]

. appendchild (s);         function Ready () {/*ie7.0/ie10.0*/             if (s.readystate = = "loaded" S.readystate = = "complete") {    
            callback ();

           }        }         function Loaded () {/*chrome/ie10.0*/     
       callback ();        }    };

Load order

And the new code has been done, the following is how to load other JS files, because the file is more, there is a certain dependence, want to go or get a JS file dictionary bar, and then do a load sequence, in this order to load.

In order to be more stable, decided to take a load of the way, that is, load a JS, and then load another JS. This ensures that dependencies are available. Of course, the disadvantage is that the loading speed will be slow. General page Load JS can be multiple JS files together to download, this speed will be relatively fast.

Using caching

General browsers for a variety of resources (such as Web pages, pictures, JS, CSS, etc.) will have a cache, there will be no longer to the server to download. It looks good, but there are two questions:

A, how the browser to determine the cached JS file is the latest?

B, JS file updated, how to force the browser to update?

How does the browser judge it? The specific steps I am not very clear, just know that there is a step to the server to ask, I cache the JS file is not up to date, and then be able to determine whether the local cache is the latest, if the latest is not toss, if not to download the latest. That is to say, even if the client already has a JS file cache, but the browser to confirm whether the latest, or will run to the server to ask. This, toss AH. Of course, normally, this process will be quick, but sometimes the process will be slow.

So, or try to avoid loading JS good. So the "JS file to reuse."

Update JS file

JS file updated, but the browser is still using the previous JS file, because there is a cache, but also stubborn that the cached JS file is the latest, hey how to do?

The simplest way is to load JS, followed by a version number, there are updates, on version number +1. Like Xxx.js?v=1. JS file is updated after xxx.js?v=2. So JS is sure to be updated.

It seems simple, but how does this version number go together? How do you update the version number itself?

Reuse

This will first look at the above diagram, is the page structure, there is a shell page (or home), we call the parent page. There are also a number of IFRAME loaded pages, we add a subpage.

As a general practice, the parent page is loaded with Jquery.js, and then the Jquery.js is added to the child page. Of course, when the child page in the load jquery.js, directly from the cache to extract, generally will not toss the server again.

However, since the parent page has already been loaded, why do I have to load the page again? Would you like to add a loaded line directly to the parent page? Search the Internet, it seems that no one has done so. Maybe I am too different, I just want to achieve this method. The advantage is that all of the JS files in the parent page in the download, the child page directly using the parent page to add a good JS, such as the page does not need to toss JS file. This efficiency can also be a bit higher, after all, that is, the use of caching in the download, but also to judge, and then do a load of action, or there will be a little loss, JS file more and more obvious.

So how to achieve it, it seems very easy to think.

Use jquery in the parent page

Var AA = $ (' div '); Find all the div in the parent page

Is it possible to do so in a child page?

Var BB = top.$ (' div '); can find Div, but is not a child page div but the parent page Div.

What happened? The reason is the search scope. jquery has three parameters, we usually only use the first one, the back is ignored. So what's the second argument? is the search scope. Where is jquery going to search when there's no designation? Loading jquery pages inside the search, instead of calling the $ page in search.

The solution is also very simple, add a parameter is good

Var BB = top.$ (' div ', document); Specify a search scope: document for a child page

Wait, this seems annoying, and when we write the script, do we have to consider whether the script executes on the parent page or in the child page?

Well, do a simple encapsulation to avoid this trouble. Write a function in a child page

function $ (p1) {

Return top.$ (p1,document);

}

All right, you done? Of course not! To see how the funeral is, please listen to let's.

PS: The following notice. is the specific implementation code, there are some ideas and ideas, do not know what else you want to know, there are words, welcome to reply below. Thank you first.