Range of use:
For information management projects such as OA, MIS, ERP, etc., the website is not considered 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 some columns of JS files I wrote myself, so how can these files be loaded conveniently? If the file changes, how can the client update the cache in time? It would be even better if the point operation efficiency could be improved.
Target:
1. It can easily reference js files.
2. Try to use various caches to avoid frequent reading of files from the server.
3. If the js file is updated or added or reduced, 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, which brings the concepts of parent page and child page. We can use this to make a fuss.
Web pages can be divided into three parts: shell, home page, label, data list, form (add, modify). Because the method of loading js here needs to use this page structure, and it is precisely for this reason that the website is not supported for the time being.
It looks familiar to see this picture. Yes, that's the structure.
text
Nowadays, when it comes to web version applications, it is increasingly relying on various js, such as third-party jQuery, easyUI, my97, etc., as well as various js written by myself. More and more functions to be implemented, more and more js need to be used, and more js files are modified frequently. So many problems arise, such as writing a lot of <script src=""> for each page. This is too troublesome. How many pages do you need to change to add a new js file? How to update the js file 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
It is obviously troublesome to use <script> to load js on the page, so what should I do? After thinking about it, I still use dynamic loading to solve it. I also searched online and found that there are many methods, including those written by themselves and those organized into frameworks (such as seejs). Sometimes I still feel that I am more skillful in making one, so I plan to write one by myself.
How to load dynamically? Using the method provided by jQuery? This is OK, but the page must refer to jQuery and the js I wrote to load the js file. In other words, if you have to write two <script>s on a page, it will be troublesome. If you can write one, you must not write two. Although it is just one more, it is really troublesome to have one more. So I decided to hand-written a small method of dynamic loading by myself.
What should I do if I can’t write? Aunt Baidu comes and help. After searching all kinds of things, I finally found a relatively ideal method, so I'll use this.
The code copy is as follows:
/* Functions that implement dynamic loading of js come from the Internet. After a little modification, it can 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. The following is how to load other js files. Since there are many files and there are certain dependencies, I will think about it and make a dictionary of js files, and then make a loading order and load it in this order.
In order to be more stable, I decided to use the method of loading one by one, that is, loading one js and then loading another js. This ensures dependencies. Of course the disadvantage is that the loading speed will be slower. Generally, web pages can be loaded with multiple js files, which will be faster.
Use cache
Generally, browsers will have a cache for various resources (such as web pages, pictures, js, css, etc.), and will no longer download them to the server if they already have them. 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 judge? I don't know much about the specific steps, but I know that there is a step to go to the server to ask 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, I won't bother. If it is not, I will download the latest one. That is to say, even if the client already has a cache of js files, the browser needs to confirm whether it is the latest and will still go to the server to ask. This is a struggle. Of course, in general, this process will be very fast, but sometimes this process will be very slow.
So, it is better to try to avoid loading js. So the "reuse of js files" is introduced.
Update js file
The Js file has been updated, but the browser is still using the previous js file because it has cached, and he is stubborn that the cached js file is the latest. What should I do?
The easiest way is to load js with a version number followed by it. If there is an update, the version number will be +1. For example, xxx.js?v=1. After the Js file is updated, it is xxx.js?v=2. In this way, js will definitely be updated.
It seems simple, but how to add this version number? How to update the version number itself?
Reuse
We need to look at the picture above first, which is the page structure, with a shell page (or home page), which we call the parent page. There are several pages loaded by iframes, and we add them to subpages.
The general approach is to load jQuery.js on the parent page, and then jQuery.js on the child page. Of course, when the subpage is loading jQuery.js, it is directly extracted from the cache, and generally no longer botheres the server.
However, since the parent page has been loaded, why do the child page need to be loaded again? Is it OK to directly load it in the parent page? I searched online and no one seemed to do that. Maybe I'm too alternative, I just want to implement this method. The advantage is that all js files are loaded in the parent page, and the child page directly uses the js loaded in the parent page, so that the child page does not need to mess with the js files. This can also be more efficient. After all, even if you use the cache to load, you need to make a judgment. Then, when doing a loading action, there will still be a little loss. The more js files, the more obvious it will be.
So how to implement it seems simple to think about it.
Use jQuery in the parent page
Var aa = $('div'); //Find all divs in the parent page
Is this possible in the subpage?
Var bb = top.$ ('div') ; //The div can be found, but it is not the div of the child page but the div in the parent page.
What's going on? The reason is the search range. jQuery has three parameters. We usually only use the first one, and the latter one is ignored. So what is the second parameter? That is the search range. Where will jQuery search when there is no specified? Search in the page that loads jQuery, instead of searching in 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 writing a script, we should also consider whether this script is executed on the parent page or on the child page?
OK, make a simple package to avoid this trouble. Write a function in the subpage
The code copy is as follows:
function $ (p1){
return top.$ (p1,document);
}
OK, is the job done? Of course not! To predict what happens next, please listen to the next breakdown.
ps: preview of the next episode. It is the specific implementation code, and there are some ideas and ideas. I don’t know if you have anything else to know. If so, please reply below. Thank you first.