JS realizes perfect include loading implementation code_javascript skills

Why does js need include? Let us think about a scenario where a.js needs to use a common common.js. Of course, you can use on the page that uses a.js, but suppose There are 5 pages that use a.js. Do you have to write the script 5 times? And if a.js needs to reference common2.js in the future, will you modify 5 pages again? Some problems with existing js include Before writing this, I searched for some information on the Internet and found that there are two problems with the include that I wrote before. These are also two important problems that include need to solve. 1. Relative path problem: Use include("../js/common.js") in a.js; the include function must use a relative path, which is the path relative to a.js. When a.js is embedded using in HTML, it may be a relative path or an absolute path. How can the include function really determine the absolute path of common.js, or the relative path to html. In order to solve this problem on the Internet, some js variables need to be added, which is inconvenient. 2. Quotation issues. The implementation of the include function on the Internet almost always uses the following two methods to insert common.js document.write(" ") or var s = document.createElement("script"); s.src = ...; head.insertAfter(s,...); The script output by document.write will be in a .js is loaded later, and the script created by createElement("script") is loaded non-blockingly. Therefore, if the common.js function is called in a.js before common.js is loaded, an error will be reported. Implementation To solve the above two problems, you can implement js include. The first question, my method is to first get the absolute path of a.js in html (if it is a relative path, convert it to an absolute path), and then convert the path of common.js to an absolute path. The second question is to use synchronous ajax to request common.js, so that there will be no reference problems. The implementation code is as follows:

Copy code The code is as follows: // According to the relative path Get the absolute path function getPath(relativePath,absolutePath){ var reg = new RegExp("\.\./","g"); var uplayCount = 0; // Return in relative path The number of upper levels. var m = relativePath.match(reg); if(m) uplayCount = m.length; var lastIndex = absolutePath.length-1; for(var i=0;i lastIndex = absolutePath.lastIndexOf("/",lastIndex); } return absolutePath.substr(0,lastIndex 1) relativePath.replace(reg,""); } function include(jssrc){ // First get the src of the current a.js. Call include in a.js and directly obtain the last script tag, which is the reference of a.js. var scripts = document.getElementsByTagName("script"); var lastScript = scripts[scripts.length-1]; var src = lastScript.src; if(src.indexOf(" http://")!=0 && src.indexOf("/") !=0){ // a.js uses a relative path, first replace it with an absolute path var url = location.href; var index = url.indexOf("?"); if(index != -1){ url = url.substring(0, index-1); } src = getPath(src,url); } var jssrcs = jssrc.split("|"); // You can include multiple js, separated by | for(var i=0; i // Use juqery’s synchronous ajax to load js. // Use document.write to dynamically add js after the current js, and there may be js reference problems // Dynamically create scripts, which are non-blocking downloads and may cause reference problems $.ajax({type:'GET',url:getPath(jssrc,src),async:false,dataType:'script'} ); } } Use include("../js/common.js") directly in a.js;

Problems with multiple requests Using the include above seems quite cool, but it comes with Another serious problem is that one more ajax request is sent. We often merge js to reduce requests for WEB performance. But after using include, there were more requests. If this problem is not solved, I believe many people will not use include in official products, unless it is a LAN product.

I have been thinking about how to solve this multi-request problem for a long time, and finally realized that there is no way to solve it using client js alone. So I thought of using server-side code to solve it I still remember that when I had an article introducing "merging, compression, and cache management of js and css", I used server-side code to merge js when the program started.

So I also added the solution to include multiple requests. Just search for all js when the program starts. If you find that include is used, replace the include function with the source code of common.js in include. In this way, there is no include function in a.js when running, but a js file that really contains the content of common.js

Postscript 丫. At the end of the day, why did I replace all the includes? What I said before is not in vain.

Personally, I feel that every product should distinguish between development environment and product environment (usually through configuration files). In the development environment, development efficiency should be the first priority, while in the product environment, performance should be the first priority. Therefore, the include here should be treated differently. In the development environment, js include is used to improve development and maintenance efficiency, while in the production environment, all includes are automatically replaced with the contents of the real js file. [Author]: BearRui(AK-47)