After deleting the scrip node that loads the JS file, can the functions in the JS file still be used?

Let's take a look at the code section as follows:

<MCE: Script Type = "text/JavaScript" id = "scriptnode" src = "test. JS "mce_src =" test. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "<br/> <! -- <Br/> alert (window. Test); <br/> test (); <br/> // --> </MCE: SCRIPT> <br/>

The code is very simple. Load a JS file: Test. js through script. There is only one simple function in the JS file:

Funnction test () {<br/> alert ('test called'); <br/> };

Result of execution in IE6: first, alert outputs the content of the test function, and then runs the test () function, and the function outputs 'test called ';

Now we add code, delete the Script node that loads the test. js file, and continue to call the test () function, as shown below:

<MCE: Script Type = "text/JavaScript" id = "scriptnode" src = "test. JS "mce_src =" test. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> alert (window. test); <br/> test (); </P> <p> // Delete and load test. JS File Script node <br/> var script = document. getelementbyid ('scriptnode'); <br/> document. body. removechild (SCRIPT); </P> <p> // make sure the file has been deleted. Alert outputs null. <br/> script = document. getelementbyid ('scriptnode'); <br/> alert (SCRIPT); </P> <p> // continue to call the test function <br/> test (); <br/> // --> </MCE: SCRIPT> </P> <p>

 

The execution result shows that, even if the Script node that loads the test. js file has been deleted, the functions in the file can still be called without prompting function-defined errors.

 

Cause analysis:

The key point is to differentiate the relationship between function calls and DOM nodes. The Script node in htmldocument mainly serves to load the corresponding script file, that is, test. JS, Once loaded, it will be done, but the JS engine will explain the scripts loaded into the Dom, rather than simply text accumulation, the JS script engine will parse test. JS statements and create corresponding scopes and function objects. For this example, once the loading is complete, we can find that the JS engine has created a function obj, as an attribute of the window object, it has nothing to do with the DOM node of the script itself. We can find through the following code:

 

 <MCE: Script Type = "text/JavaScript" id = "scriptnode" src = "test. JS "mce_src =" test. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> alert (window. test); <br/> test (); </P> <p> // Delete and load test. JS File Script node <br/> var script = document. getelementbyid ('scriptnode'); <br/> document. body. removechild (SCRIPT); </P> <p> // make sure the file has been deleted. Alert outputs null. <br/> script = document. getelementbyid ('scriptnode'); <br/> alert (SCRIPT); </P> <p> // continue to call the test function <br/> test (); </P> <p> // It is already an attribute of window. <br/> alert (window. test); <br/> // --> </MCE: SCRIPT>

 

 

If we execute the following code again, we can delete the corresponding function object:

Delete window. test;

// Call again, prompting that the object does not support this operation error, indicating that the function object has been removed

Window. Test ();

 

Summary:

Through this example, we can find that the subsequent dynamic creation of script scripts will dynamically load JS files or request JSON data. Once the loading is determined, we can remove the corresponding Script node from the callback function to prevent the DOM structure from getting bigger and bigger. At the same time, we can continue to call the successfully loaded JS function, because the functions and variables in the window have been attach to the window object.