JavaScript learning 10: Dynamic Loading of scripts and styles, javascript scripts

JavaScript learning 10: Dynamic Loading of scripts and styles, javascript scripts
When writing web pages, we need to introduce a lot of JavaScript script files and CSS style files. Especially when there is a large demand for websites, the demand for scripts also increases. As a result, the performance of the website will be greatly reduced, so the concept of dynamic loading emerged, that is, loading the corresponding script and style as needed. Next, let's take a look at how to implement dynamic loading.Dynamic script:Let's take a look at a sample code for dynamically loading js files:

// Dynamically load JSvar flag = false; if (flag) {loadScript ('browserdetect. js ');} function loadScript (url) {var script = document. createElement ('script'); script. type = 'text/javascript '; script. src = url; document. getElementsByTagName ('head') [0]. appendChild (script );}

In this way, we only need to control the flag value to determine whether the js script file is loaded to the current page. Let's take a look at an example of dynamic JavaScript Execution:

// Dynamically execute JSvar flag = true; if (flag) {executeScript ();} function executeScript () {var script = document. createElement ('script'); script. type = 'text/javascript '; var text = document. createTextNode ("alert ('liany')"); script. appendChild (text); document. getElementsByTagName ('head') [0]. appendChild (script );}

Dynamic StyleWe are certainly familiar with all kinds of skin-changing functions, but you have never thought about how skin-changing works. I also learned this and suddenly realized that it turned out that the advanced skin-changing feature was so simple: just change the CSS style. Let's take a look at how the webpage style is dynamically loaded. A style sheet can be loaded in two ways: <link> label and <style> label. Therefore, two code examples are provided to illustrate how to dynamically load styles. Using link tag loading is no different from the dynamic loading js script mentioned above.

<Span style = "font-size: 18px;"> // dynamically execute linkvar flag?true=if(flag?#loadstyle('basic.css ');} function loadStyle (url) {var link = document. createElement ('link'); link. rel = 'stylesheet '; link. type = 'text/css '; link. href = url; document. getElementsByTagName ('head') [0]. appendChild (link) ;}</span>

It is troublesome to use style to change the style. because it involves compatibility issues, during execution, you need to select the corresponding function based on the Type supported by the browser to execute this process, see the sample code.

<Span style = "font-size: 18px;"> // dynamically execute stylevar flag = true; if (flag) {var style = document. createElement ('style'); style. type = 'text/css '; document. getElementsByTagName ('head') [0]. appendChild (style); insertRule (document. styleSheets [0], '# box', 'background: red', 0);} function insertRule (sheet, selectorText, cssText, position) {// if it is not IEif (sheet. insertRule) {sheet. insertRule (selectorText + "{" + cssText + "}", position);} else if (sheet. addRule) {// if it is IEsheet. addRule (selectorText, cssText, position) ;}</span>

Summary: I remember the teacher repeatedly stressed that do not add entities if necessary. The same is true in the Process of program design. When a program is started, many things are loaded, which will inevitably affect the program performance. Therefore, we must learn, adding at is a bit of a decoration model, and it is also a manifestation of flexibility. Although it is a small knowledge point, it is of great use if it is used well.