Also say JS script loading control

Issue background

The front-end uses the IFRAME + HTML to do the background management system. Now JS, jquery plug-ins are very many, each page is a reference like this:

    <Scriptsrc=".. /scripts/jquery-1.7.1.js "></Script>    <Scriptsrc=".. /scripts/uploadify/jquery.uploadify.js "></Script>    <Scriptsrc=".. /scripts/uploadify/swfobject.js "></Script>    <Linkhref=".. /scripts/uploadify/uploadify.css "rel= "stylesheet" />

Sometimes it is necessary to update one of the components, in order to avoid the client browser manually refresh, the general practice is to increase the version number, such as xxx.js?v=1111.

Or, you need to remove a component and reference a component.

In all 2 cases, you need to add a script reference for each page. Every time you create a new HTML, you have to copy the script reference of the previous page, there is wood?

Solutions

Now there are require.js, Sea.js, LABJS and so on various tall on the frame.

Above frame, landlord only tried to solve this problem with lab.js, it can control the asynchronous loading of the script, as well as the dependency of the script, then it can do the initialization operation after the script has finished loading. At that time just to do a demo, has been a long time, and no use, for reasons without it, if you want to control the dynamic loading of the script, but also like the same as before directly on the page to refer to script, in other words, the main building is not to rewrite the script to refer to the way, but on the original basis slightly improved.

The key method is simple, using the Document.writein (' ... ') to load. This mode of loading is synchronous loading, that is it.

The specific idea is to define an array to hold the script and the CSS path, it is recommended to use absolute path, so that the location of the page will not cause the script to load.

Then do a little bit of improvement, synchronous loading JS, asynchronous loading CSS. It also supports setting the version number, which makes it easy to control the client's Automatic Updates. The approximate implementation code is as follows:

In the actual application process, this JS script will be changed frequently, so it is necessary to load the script through Document.writein. First, you can write in the page as follows

< Script > Document.writein (' ... ' ); </ Script >

This is slightly inconvenient. So the landlord wrote a script, only as the previous line of code, is used to control the loading of the previously defined Generic Script component. This script with only one line of code, is perpetual, all pages are referenced directly, and it controls the subsequent script changes.

Test

It says that the script is loaded in the form of synchronization, in order to prove this, the landlord had to write a simple example. Look at the following HTML code:

<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>    <title></title></Head><Body>    <inputtype= "text"ID= "UID"value= "111" /></Body></HTML><Scriptsrc= "Scripts/com/boot.js"></Script><Script>Alert ($ ("#uid"). Val ());</Script>

And boot.js is the boot script, which is the line of code that was mentioned earlier:

/* boot to load all JS files */Document.writeln ("<script src= '/scripts/com/bootallscript.js?v=" + math.random () + "' ><\/script > ");

Bootallscript.js is the core of the complex load all the JS and CSS.

(function () {    varBase = '/scripts/'; varLoader ={base:'/scripts/', ver:1, content: [//define scripts that need to be loaded' Jquery-1.7.1.min.js '], Loadcss:function(cssurl) {varlink = document.createelement ("link"); Link.rel= "stylesheet"; Link.type= "Text/css"; Link.href=Cssurl; document.getElementsByTagName ("Head") [0].appendchild (link); }, run:function () {             for(varIinchloader.content) {varc =Loader.content[i]; if(C.length <= 2)Continue; varp = loader.base + C + "? v=" +loader.ver;; varType = C.SUBSTR (c.length-2, c.length); if(Type = = = ' js ') {//Synchronous loading JS fileDocument.writeln ("<script src=" + p + "' ><\/script>"); } Else{//asynchronously loading a CSS fileloader.loadcss (P);    }            }        }    }; //Load JS scriptLoader.run ();}) ();

After running, the page gets the value of the control by using jquery after the load is completed. This way and the original direct script reference, the difference is not very much.

Here, we create a new page, only need to reference boot.js can be loaded on all components, and page logic-related JS, can also be directly referenced under the Boot.js, did not change the original script reference habits, but also greatly save the code, improve the control of the script, this is the effect of the landlord want.

In the end, of course, MVC has a solution to a similar problem, which is not discussed here because the front-end iframe+html has no C #.

Sample Download