Using extjs to develop MIS (2): Dynamic Loading of JS

For a complex system, there may be hundreds of JS clients. If all of them are loaded into the user's browser, on the one hand, excessive network transmission will occur, on the other hand, parsing a large number of JS files in the browser will cause performance degradation, which will significantly affect the user's perceptible performance. Therefore, JS loading is carried out dynamically. This dynamic loading is manifested in two ways:

1. JavaScript files that can not be loaded will never be loaded.
2. The JS to be loaded is not loaded until it is actually used.

1. JavaScript files that can be loaded will never be loaded.

Take the login process as an example:

The attempt to log on includes two situations: one is that the user attempts to automatically log on based on the current token when refreshing the page, and the other is that the user saves the user name and password during the last logon, in both cases, no matter which type of login is successful, you do not need to log on again, so you do not need to load the JS formlogin.

2. The JS to be loaded will not be loaded until it is actually used.

For a function module, a menu item is displayed only when the current user has the permission of this module. Now, when a menu item of this module is clicked for the first time, the Js of this module will be loaded:

3. js loading based on extjs Ajax

Ajax calls in extjs are asynchronous, while dynamic loading of JS usually means that a function is called after the JS load is complete, and the function may be a function in JS to be loaded, so the correspondingCodeIt should be written as follows:

 srims. action. actions = { 'project-Vertical-list' :  function  () {srims. action. _ callprojectaction ( 'srims. projects. listverticalproject (); ') ;},  'project-horizontal-list' :  function  () {srims. action. _ callprojectaction ( 'srims. projects. listhorizontalproject (); ') ;}}; srims. action. _ callprojectaction =  function  (FN) { If  (srims. projects) {eval (FN) ;}< SPAN class = "kwrd"> else  {srims. loadprojectmodule (FN) ;}

 srims. loadprojectmodule =  function  (callbackfunctionstring) {Ext.  namespace  ( 'srims. project' );  var  JS = [ "/srims/projects/projectlevel. JS "]; JS [Js. length] =  "/srims/projects/projectstate. JS "; JS [Js. length] =  "/srims/projects/project. JS "; JS [Js. length] =  "/srims/projects/projectstore. JS "; JS [Js. length] =  "/srims/projects/projectgridpanel. JS "; JS [Js. length] =  "/srims/projects/projectaction. JS "; srims. loadjs (JS,  function  () {eval (callbackfunctionstring)}) ;}

When the function to be executed is the function included in the JS to be loaded, the function name calls eval to execute the function when the parameter is passed and loaded.

The actual loading operation is srims. the loadjs function accepts two parameters: the first parameter is the JS to be loaded-either a JS or a JS array; the second parameter is the callback function after loading. When loading JavaScript code, loading is simple: initiate an Ajax request, execute the obtained result with Eval, and then call back the eval function; when loading a series of JS files (as in the code above), the situation will be more complicated. You need to call loadjs recursively until all JS files are loaded, and then call the eval callback function. The following code is used:

1:Srims. jstoload = undefined;
 

 
2:Srims. jsloadcallback = undefined;
 

 
3:Srims. loadjs =Function(JS, callback ){
 

 
4:Srims. jstoload = JS;
 

 
5:Srims. jsloadcallback = callback;
 

 
6:Srims. _ loadjs ();
 

 
7:}
 

 
8:Srims. _ loadjs =Function(){
 

 
9:VaRJS = srims. jstoload;
 

 
10:VaRCallback = srims. jsloadcallback;
 

11:
 

 
12:If(Ext. Type (srims. jstoload )! ='String'){
 

 
13:If(Srims. jstoload. Length = 1 ){
 

 
14:JS = srims. jstoload [0];
 

 
15:Callback = srims. jsloadcallback;
 

 
16:}
 

 
17:Else{
 

 
18:JS = srims. jstoload. Shift ();
 

 
19:Callback = srims. _ loadjs;
 

 
20:}
 

21:}
 

 
22:
 

 
23:Ext. Ajax. Request ({
 

 
24:URL:'/JavaScript'+ JS,
 

 
25:Success: srims. _ onloadjs,
 

 
26:Method:'Get',
 

 
27:Scope: callback
 

 
28:});
 

 
29:}
 

 
30:Srims. _ onloadjs =Function(Response ){
 

 
31:Eval (response. responsetext );
 

32:This();
 

 
33:}
 

Note that the callback function is itself in Row 3, resulting in recursion.