Dynamic loading, caching, updating and multiplexing of JS (i)

scope of Use:

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

problems encountered:

Complete a project, often need to refer to a lot of JS files, such as Jquery.js, Easyui and so on. There are some of their own write the column JS file, then how to easily load these files, if the file changes how to let the client update the cache in a timely manner? It would be much better if we could improve the efficiency of the point operation.

Target:

1, can be conveniently referenced JS file.

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

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

4, JS file reuse.

page Structure:

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

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

Look at this picture a little familiar. Well, that's the structure.

　　

Body

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

Dynamic Loading

In the page use <script> loading JS, obviously very troublesome, then how to do? To think about it or to use the dynamic loading method to solve. on the internet also searched, there are many ways, have their own manual writing, have organized into a framework (such as Seejs). Sometimes it feels like I'm making a more should also launch, so I'm going to write a set myself.

How does it load dynamically? Using the methods provided by jquery? This is possible, but the page must refer to jquery and I wrote JS file to load JS. That is to say a page to write two <script> Can write one, you must not write two, although only one more, but more so one is really very troublesome. So decide to write your own handwriting a small method of dynamic loading.

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

1 /*implementation of the dynamic loading JS function, from the Internet, made a little modification, can be compatible with IE10*/2 varLoadscript =3 {4$$:function(ID) {returndocument.getElementById (ID);},5Tagfunction(Element) {returndocument.getElementsByTagName (Element);},6Ce:function(Element) {returndocument.createelement (Element);},7Js:function(URL, callback) {8         vars = loadscript.ce (' script ');9S.type = "Text/javascript";TenS.SRC =URL; One         if(Document.documentmode = = Ten | | document.documentmode = = 9) { AS.onerror = S.onload =loaded; -}Else { -S.onreadystatechange =Ready ; theS.onerror = S.onload =loaded; -         } -Loadscript.tag (' head ') [0].appendchild (s); -  +         functionReady () {/*ie7.0/ie10.0*/ -             if(S.readystate = = ' Loaded ' | | s.readystate = = ' complete ') { + callback (); A             } at         } -  -         functionLoaded () {/*chrome/ie10.0*/ - callback (); -         } -     } in};

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 dependency, want to go or get a dictionary of JS file, and then do a load order, in order to load.

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

using the Cache

General browser for a variety of resources (such as Web pages, pictures, JS, CSS, etc.) there will be a cache, has already been to the server to download. It looks good, but there are two problems:

A, how does the browser determine that the cached JS file is not up to date?

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

How is the browser judged? Specific steps I am also not clear, just know that there is a step to the server to ask, I cache the JS file is not the latest, and then be able to determine whether the local cache is up-to-date, if the latest is not to toss, if not to download the latest. That is, 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 it. Of course, the process will be very fast, but sometimes the process will be slow.

So, still try to avoid loading JS good. So 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 stubborn that the cache of JS file is the latest, hey how to do it?

The simplest way is to load JS, followed by a version number, there is an update, on the version number +1. Like Xxx.js?v=1. JS file after update is xxx.js?v=2. This way JS will certainly be updated.

It seems simple, but how does this version number add to it? How does the version number itself update?

Multiplexing

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

As a general rule, the parent page is loaded with Jquery.js, and then the child page loads the jquery.js. Of course, when the sub-page loading jquery.js, directly from the cache to extract, generally will not go to toss the server.

However, since the parent page is already loaded, why does the child page have to be loaded again? Is it OK to use the parent page to load the rows directly? To search the Internet, no one seems to do so. Perhaps I am too alternative, I just want to achieve this method. The advantage is that all the JS files are loaded in the parent page, the sub-page directly with the parent page to load the JS, this way the page does not need to toss JS file. This efficiency can also be higher, after all, the use of cache in the load, but also to judge, and then do a load of action, or there will be a little bit of loss, JS file more is more obvious.

So how to do it, it seems very simple to think.

Use jquery in parent pages

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

Is it possible to do this in a sub-page?

Var BB = top.$ (' div '); Be able to find Div, but is not a sub-page div but a div in the parent page.

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 does jquery search when it is not specified? Load the jquery page inside the search instead of calling $ on the page to search.

The solution is simple enough to add a parameter.

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

Wait, this seems very annoying, when we write the script, we have to consider whether the script is executed in the parent page or in the child page?

OK, do a simple package to avoid this hassle. Write a function in the sub-page

function $ (p1) {

Return top.$ (p1,document);

}

All right, you done? Of course not! If you anticipate your funeral, listen to tell.

PS: the upcoming episode. is the specific implementation of the code, there are some ideas and ideas, do not know what else you want to know no, there are, welcome to reply below. Thank you first.