Dynamic loading caching updating and reuse of javascript (part 1)

Scope of use:

OA, MIS, ERP and other information management projects, temporarily do not consider the website.

Problems encountered:

To complete a project, it is often necessary to refer to many js files, such as jquery.js, easyUI, etc. There are some js files written by myself, so how to load these files conveniently? If the files have changes, how can the client update the cache in time? If you can improve the efficiency of the operation, so much the better.

Goal:

1,   Js files can be easily referenced.

2,   Use as many caches as possible to avoid reading files frequently from the server.

3,   If the js file is updated or several reduced js files are added or removed, the client side should be able to update automatically and immediately.

4,   Reuse of Js files.

Page structure:

Generally OA, MIS and other projects, most of the way to achieve frameset or iframe, so there is a parent page and child page concept. We can use this to do some writing.

This picture is a little familiar. Well, that's the structure.

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/20146992429617.png? 2014599257 ">

The body of the

Now do the web version of the application, more and more rely on a variety of js, third-party jQuery, easyUI, my97, and write their own variety of js. To achieve more and more functions, the need to use more and more js, js file modification is also very frequent. This leads to a number of problems, such as a large number of pages per page. Script SRC = "" > . This is too much trouble, add a new js file, need to change how many pages? Js file updated how to make the client updated immediately? How to make the client load js faster. Some Js files also have dependencies, how to ensure the loading order? This article is about sharing my solution.

Dynamic loading

Use < on the page Script> Loading js is obviously a hassle, so what do we do? After a while or with dynamic loading method to solve. Search the web, too, in a variety of ways, either by hand or as a framework (seejs, for example). Sometimes I still feel more handy, so I plan to write a set by myself.

How do you load dynamically? Using the methods provided by jQuery? This is fine, but the page must reference jQuery and the js I wrote to load the js file. That means two < Script> That's a problem. Can write one, must not write two, although it is only one more, but so much more is really troublesome. So decide to hand-write a small method of dynamic loading yourself.

What if you can't write? Baidu aunt to help it. Various search ah, finally found a more ideal method, en with this.

var loadscript =
{
    $$: function(id) { return document.getElementById(id); },
    tag: function(element) { return document.getElementsByTagName(element); },
    ce: function(element) { return document.createElement(element); },
    js: function(url, callback) {
        var s = loadscript.ce('script');
        s.type = "text/javascript";
        s.src = url;
        if (document.documentMode == 10 || document.documentMode == 9) {
            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, due to the file is more, there is a certain dependency, want to think or get a js file dictionary, and then do a load order, according to the order to load.

In order to be more stable, we decided to use the method of loading one by one, that is, loading one js, and then loading another js. This ensures the dependency. Of course, the disadvantage is that the loading speed will be relatively slow. General web page load js can be a number of js files together to download, this speed will be relatively fast.

Use the cache

The average browser has a cache of various resources (such as web pages, images, js, CSS, etc.), and once you have it, you won't be able to download it to the server. It looks great, but there are two problems:

A. How does the browser determine whether the cached js file is up to date?

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

How does the browser know? I do not know the specific steps, but I know that there is a step is to ask the server, my cache of js file is the latest, and then to be able to determine whether the local cache is the latest, if it is the latest, do not bother, if it is not to download the latest. That is, even if the client already has a cache of js files, the browser will go to the server to make sure they are up to date. Well, toss and turn. Of course, in general, it's going to be fast, but sometimes it's going to be slow.

Therefore, it is better to avoid loading js as much as possible. Hence the introduction of "js file reuse".

Update js file

Js file updated, but the browser is still using the previous Js file, because there is a cache, but also stubbornly think that the cache of the Js file is the latest, ah?

The easiest way to do this is to load js with a version number, and when it's updated, it's version number +1. Such as XXX. Js? V = 1. After the Js file is updated, it will be xxx. Js? V = 2. So js will definitely be updated.

It seems simple enough, but how to add the version number? How is the version number itself updated?

reuse

The first thing you need to look at is the top diagram, which is the page structure, with a shell page (or home page) that we call the parent page. There are also several iframe loaded pages, which we add as child pages.

The general rule is to load jquery.js on the parent page and jquery.js on the child page. Of course, when subpages are loaded with jquery.js, they are extracted directly from the cache and generally won't bother the server anymore.

However, if the parent page is already loaded, why should the child page be loaded again? How about loading it directly from the parent page? A search on the Internet shows that no one seems to be doing this. Maybe I'm too eccentric, I just want to achieve this method. The advantage is that all js files are loaded in the parent page, child pages directly use the parent page loaded js, so that the page does not need to fiddle with the js file. This efficiency can be more, after all, even using the cache load, is to judge, and then do a load action, or there will be a little loss, js file more is also more obvious.

So how do we do that? It seems pretty easy to think about.

JQuery is used in the parent page

Var aa = $(' div ');   // find all the divs in the parent page

Can I do that on the subpage?

Var  Bb = top.$('div'); // can find div, but not the div of the child page, but the div of the parent page.

What happened? The reason is the scope of the search. JQuery has three parameters, we usually only use the first one, the latter is ignored. So what's the second parameter? The search area. Where does jQuery search when not specified? Load the search in the jQuery page instead of the search in the page that calls $.

The solution is also very simple, just add a parameter

Var  Bb = top.$('div',document); // specifies the search scope: document for child pages

Wait, this seems annoying, but when we write a script, we have to think about, is this script going to be executed in the parent page or in the child page?

Okay, so let's do a simple encapsulation to avoid this. I'll put a function in the subpage

function $ (p1){
         return top.$ (p1,document);
}

 

All right, are we done? Of course not! In advance, listen to the next breakdown.

Ps: the next trailer. Is the specific implementation code, there are some ideas and ideas, do not know what you want to know, if there is, welcome to reply in the following. Thank you first.

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/20146992520563.png? 20145992550 ">