Dynamic Loading, caching, updating, and reuse of javascript (1)

Scope of use:

Websites are not considered for OA, MIS, ERP, and other information management projects.

Problems:

To complete a project, you often need to reference many js files, such as jQuery. js and easyUI. There are also some js Files written by myself. How can these files be easily loaded and how can the client promptly update the cache if the files change? It would be better to improve the running efficiency.

Objectives:

1. You can easily reference js files.

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

3. If js files are updated, added, or removed, the client must be automatically and immediately updated.

4. Reuse of Js files.

Page Structure:

Most projects such as OA and MIS are implemented using frameset or iframe. In this way, the concept of parent page and child page is introduced. We can use this to make an article.

A webpage can be divided into three parts: shell, home page, Tag, data list, and form (ADD and modify ). This is because the js loading method needs to use this page structure, which is precisely for this reason. Therefore, websites are not supported for the time being.

Look at this picture. Well, this is the structure.

Body

Currently, web applications are increasingly dependent on various js types, such as third-party jQuery, easyUI, and my97, as well as various self-written js types. More and more functions need to be implemented, more and more js files need to be used, and the js files are frequently modified. As a result, a lot of problems have emerged, such as writing a lot of <script src = ""> on every page. This is too troublesome. How many pages do I need to change to add a new js file? How to make the client update immediately after the js file is updated? How to make the client load js more quickly. Some Js files have dependencies. How can we ensure the Loading Order? The content of this article is to share my solutions.

Dynamic Loading

Using <script> to load js on the page is obviously troublesome. What should I do? I want to solve this problem by using dynamic loading. I also searched the internet. There are many methods, such as manually writing them, and organizing them into frameworks (such as seejs ). Sometimes I still feel like I have a better idea, so I plan to write a set myself.

How to dynamically load it? Is the method provided by jQuery used? This is acceptable, but the page must reference the js file loaded by jQuery and I. That is to say, two <scripts> are required for a page, which is troublesome. If you can write one, you must not write two. Although there is only one more, it is really troublesome to write one. Therefore, we decided to manually write a small method for dynamic loading.

What if I don't write? Baidu Dayu can help. Various searches finally found an ideal method, so I used it.

Copy codeThe Code is as follows:
/* Implement the function for dynamically loading js data from the Internet. Make some modifications and 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.doc umentMode = 10 | document.doc umentMode = 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 Sequence

The new Code has been fixed. The following figure shows how to load other js files. Because there are many files and there is a certain dependency, I 'd like to get a dictionary of js files, then, load the data in the order of loading.

To be more stable, we decided to load one js one by one, that is, loading one js and loading another. This ensures the dependency. Of course, the disadvantage is that the loading speed is slow. Generally, JavaScript files can be downloaded along with multiple js files loaded on a webpage, which is faster.

Use Cache

Generally, browsers have a cache for a variety of resources (such as web pages, images, js, css, etc.) and will no longer download the cache to the server. It looks good, but there are two problems:

A. How does the browser determine whether cached js files are up-to-date?

B. How to force browser updates when the js file is updated?

How is the browser determined? I am not quite clear about the specific steps. I only know that I have to go to the server to check whether the cached js file is up to date. Then I can determine whether the local cache is up to date, if it is the latest version, we will not try again. If it is not, we will download the latest version. That is to say, even if the client already has the js File Cache, the browser should check whether it is up to date and still go to the server to ask. This is tough. Of course, this process will usually be very fast, but sometimes it will be very slow.

Therefore, try to avoid loading js. As a result, "reuse of js Files" is introduced ".

Update js files

The Js file is updated, but the browser is still using the previous js file. Because of the cache, It is stubborn to think that the cached js file is the latest. What should I do?

The simplest method is to follow a version number when loading js. if the version number is updated, the version number is + 1. For example, xxx. js? V = 1. After the Js file is updated, is it xxx. js? V = 2. In this way, js will be updated.

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

Reuse

First, let's look at the figure above, that is, the page structure. There is a shell page (or homepage), which is called the parent page. There are also several iframe loaded pages. We add them as subpages.

The general practice is to load jQuery. js in the parent page and then the jQuery. js in the Child page. Of course, when the subpage is loading jQuery. js, It is extracted directly from the cache and will not be tossed on the server any more.

However, since the parent page has already been loaded, why should I load the child page again? Can I load the rows directly on the parent page? I searched the internet and it seems that no one did this. Maybe I am 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 files loaded in the parent page, so that the pages do not need to be involved in js files. This way, the efficiency can be higher. After all, it is also necessary to judge whether to use the cache for loading. Then, when doing a loading operation, there will still be a little loss. The more js files, the more obvious it will be.

So how to implement it? It seems very easy to think about it.

Use jQuery in the parent page

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

Can this be done in the subpage?

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

What's going on? The reason is the search range. JQuery has three parameters. We usually only use the first parameter, and the following parameters are ignored. So what is the second parameter? Is the search range. Where does jQuery search when it is not specified? Load the jQuery page to search, instead of calling the $ page to search.

The solution is also simple. Just add a parameter.

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

Wait, it seems annoying. When writing a script, should we consider whether the script is executed on the parent page or in the Child page?

Well, make a simple encapsulation to avoid this problem. Write a function in the subpage

Copy codeThe Code is as follows:
Function $(p1 ){
Return top. $ (p1, document );
}

 

Okay. Is that all done? Of course not! Let's take a look at the future.

Ps: Next set forecast. Is the specific implementation code, there are some ideas and ideas, do not know what you want to know, if there is, please reply below. Thank you.