Dynamic loading, caching, updating and reuse of javascript (1)_javascript skills

Usage scope:

Information management projects such as OA, MIS, ERP, etc. do not consider websites for the time being.

Problems encountered:

To complete a project, you often need to reference many js files, such as jQuery.js, easyUI, etc. There are also a series of js files written by myself, so how can these files be loaded conveniently? If the files change, how can the client update the cache in time? It would be better if the operating efficiency could be improved.

Target:

1. You can easily reference js files.

2. Try to use various caches to avoid frequently reading files from the server.

3. If the js file is updated or several js files are added or deleted, the client needs to be able to update automatically and immediately.

4. Reuse of Js files.

Page structure:

Generally, projects such as OA and MIS are mostly implemented using frameset or iframe, so that there is the concept of parent page and child page. We can use this to make a fuss.

Web pages can be divided into three parts: shell, homepage, tags, data list, and form (add, modify). Because the method of loading js mentioned here requires the use of this page structure, and it is for this reason that the website is not supported for the time being.

This picture may look familiar. Well, that's the structure.

Text

Nowadays, when making web applications, we rely more and more on various js, such as third-party jQuery, easyUI, my97, etc., as well as various js written by ourselves. There are more and more functions to be implemented, more and more js need to be used, and js files are modified frequently. As a result, many problems arose, such as writing a lot of

Dynamic loading

Using <script> to load js in the page is obviously very troublesome, so what should I do? After much deliberation, I still use dynamic loading to solve it. I also searched on the Internet and found that there are many methods, some are written manually, and some are organized into frameworks (such as seejs). Sometimes I still feel that it is more convenient to make one myself, so I plan to write a set myself. </script>

How to load dynamically? Use the methods provided by jQuery? This is possible, but the page must reference jQuery and the js I wrote to load the js file. In other words, one page needs to write two <script>, which is troublesome. If you can write one, you must not write two. Although it is only one more, it is really troublesome to have one more. So I decided to write a small dynamic loading method by hand. </script>

What should I do if I can’t write? Auntie Baidu is here to help. After various searches, I finally found a more ideal method, so I used this.

Copy code The code is as follows:

/*The function to dynamically load js comes from the Internet and has been modified a little to be compatible with IE10 */
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();

}
}
};

Loading order

The new code has been completed. Here is how to load other js files. Since there are many files and there are certain dependencies, I thought about it and got a dictionary of js files, and then made a loading sequence. According to Load in this order.

In order to be more stable, we decided to use the loading method one by one, that is, after loading one js, load another js. This ensures dependencies. Of course, the disadvantage is that the loading speed will be slower. Generally, when loading js on a web page, multiple js files can be downloaded at the same time, which will be faster.

Use caching

General browsers will have a cache for various resources (such as web pages, pictures, js, css, etc.). If they are already available, they will not be downloaded from the server. It seems good, but there are two problems:

A. How does the browser determine whether the cached js file is the latest?

B. The js file has been updated. How to force the browser to update?

How does the browser determine? I don’t know the specific steps. I just know that one step is to ask the server whether the js file I cache is the latest, and then I can determine whether the local cache is the latest. If it is the latest, don’t bother. , if not, then download the latest one. That is to say, even if the client already has a cache of js files, if the browser wants to confirm whether it is the latest, it will still go to the server to ask. This is a toss up. Of course, under normal circumstances, this process will be very fast, but sometimes this process will be very slow.

So, it is better to avoid loading js as much as possible. So the "reuse of js files" was introduced.

Update js file

The JS file has been updated, but the browser is still using the previous JS file because it is cached, and it stubbornly believes that the cached JS file is the latest. What should I do?

The simplest method is to load js followed by a version number. If there is an update, it will be version number 1. For example xxx.js?v=1. After the Js file is updated, it will be xxx.js?v=2. In this way, js will definitely be updated.

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

Reuse

Let’s first look at the picture above, which is the page structure. There is a shell page (or homepage), which we call the parent page. There are also several pages loaded by iframes, and we will add subpages.

The general approach is to load jQuery.js in the parent page, and then load jQuery.js in the child page. Of course, when the subpage loads jQuery.js, it is extracted directly from the cache, and generally no more trouble is required on the server.

But, since the parent page has already been loaded, why does the child page need to be loaded again? Is it possible to directly use the one loaded in the parent page? I searched online and no one seems to be doing this. Maybe I'm too different, I just want to implement this method. The advantage is that all js files are loaded in the parent page, and the child pages directly use the js loaded in the parent page, so that the child pages do not need to toss with js files. This can also be more efficient. After all, even if you load it from the cache, you still have to make a judgment before making a loading action. There will still be a little loss. The more js files there are, the more obvious it will be.

So how to implement it, it seems very simple when you think about it.

Use jQuery in the parent page

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

Is this possible in sub-pages?

　Var bb = top.$ ('div'); //The div can be found, but it is not the div of the child page but the div of the parent page.

What’s going on? The reason lies in the search scope. jQuery has three parameters. We usually only use the first one, and the rest are ignored. So what is the second parameter? That's the search scope. When not specified, where will jQuery search? Search in the page that loads jQuery, not the page that calls $.

The solution is also very simple, just add a parameter

　Var bb = top.$ ('div',document); //Specify the search range: document

of the subpage

Wait, this seems very annoying. When we write a script, we also need to consider whether this script is executed in the parent page or in the child page?

Okay, let’s make a simple package to avoid this trouble. Write a function in the subpage

Copy code The code is as follows:

function $ (p1){
                                                                             $ (p1,document);
}

Okay, are you done? Of course not! To predict what will happen next, please listen to the explanation next time.

ps: Preview of the next episode. It’s the specific implementation code, as well as some thoughts and ideas. I don’t know if you have anything else you want to know. If so, please feel free to reply below. Thank you in advance.