Dynamic loading JS and CSS

Using HTML and CSS / JS separation of form to design your pages, so that means the way through the chain need to import the necessary files into HTML files, do so to achieve the purpose of separation, may also bring some problems .

　　1. with a CSS or JS in each page to be imported once, which inevitably leads to duplication of code.

　　2. Import wording of the path, the path is absolute or relative path?

　　　　① absolute path: the path from the root to be written from the project, if the project changed its name or rename the file path will lead to import all HTML pages need to change it again, which is obviously too big a fuss.

　　　　② relative path: If the page level HTML file is inconsistent, it will cause the file I need to judge the relative import of the HTML page is at which level, and then to write how many "../", so as to properly introduced.

Solve the above problems, simply by a common JS file (e.g. common.js), and then introduced into a dynamic manner JS code can be resolved.

　　1. Preparation of common.js

. 1  / * *
 2  * the JS / import the CSS file
 . 3  * @param filePath file path
 . 4  * @param fileType file type (JS, CSS)
 . 5  * @return
 . 6   * / 
. 7  function loadJsOrCssFile (filePath) {
 . 8      
. 9      var isJsFile = / $ JS / i.test (filePath);
 10      var fileType = isJsFile "JS":? "CSS" ;
 . 11  
12 is      IF (isIncludeFile (filePath, isJsFile)) {
 13 is          return ;
 14      }
 15  
16      IF (fileType == "JS " ) {
 . 17  
18 is         var fileRef = document.createElement('script')
19         fileRef.setAttribute("type","text/javascript")
20         fileRef.setAttribute("src", filePath)
21     }else if (fileType == "css"){
22 
23         var fileRef = document.createElement("link")
24         fileRef.setAttribute("rel", "stylesheet")
25         fileRef.setAttribute("type", "text/css")
26         fileRef.setAttribute("href", filePath)
27     }
28 
29     if( Typeof the fileRef! = "Undefined" ) {
 30  
31 is          document.getElementsByTagName ( "head") [0 ] .appendChild (the fileRef)
 32      }
 33 is  }
 34 is  
35  / * *
 36  * determined whether JS / CSS file into the
 37 [  * @param fileName file name
 38 is  * @return whether to import the
 39   * / 
40  function isIncludeFile (fileName, isJsFile) {
 41 is      
42 is      var fileRefArray = document.getElementsByTagName (isJsFile 'Script': 'Link'? );
 43 is      for ( var0 = I, len = fileRefArray.length; I <len; I ++ ) {
 44 is          IF (fileRefArray [I] [isJsFile 'the src':? 'the href'] the indexOf (fileName.) = -1)! return  to true ;
 45      }
 46 is      return  to false ;
 47  }
 48  
49  // base path (absolute path) 
50  var the basePath = "/ smilenursecare / View /" ;
 51 is  // the JS file storage path (absolute path) 
52 is  var basePathJs = "/ smilenursecare / View / JS / " ;
 53 is  // the CSS file storage path (absolute path) 
54 is  var basePathCss =" / smilenursecare / View / CSS / " ;
55 
56 
57 // 导入共通的JS和CSS
58 loadJsOrCssFile(basePathCss + "general.css");
59 loadJsOrCssFile(basePath + "header/css/smart.css");
60 loadJsOrCssFile(basePath + "lib/TinyDropdown/style.css");
61 
62 loadJsOrCssFile(basePathJs + "jquery-1.7.1.min.js");
63 loadJsOrCssFile(basePath + "lib/TinyDropdown/script.js");
64 loadJsOrCssFile(basePathJs + "corpus.js");
65 loadJsOrCssFile(basePathJs + "control.js");
function68Import tab related to JS and CSS//6766 
 
  loadTabsFile(){
69 　　loadJsOrCssFile(basePath + "lib/tabs/ui.tabs.css");
70 　　loadJsOrCssFile(basePath + "lib/tabs/ui.core.js");
71 　　loadJsOrCssFile(basePath + "lib/tabs/ui.tabs.js");
72 }

common.js

　　Using loadJsOrCssFile () function, which can be customized to select the file to load. Define multiple paths, because the definition is an absolute path, so no need to worry about the level of the problem caused by the relative path, if the project was renamed or modify the file path, only need to modify the value of a variable base path on it, do so to enhance the project the portability and flexibility. Further, loadTabsFile () Such function can also be defined as required and loading a plurality of different contents, so that the import content depending on the needs, isIncludeFile (verification) functions also effectively avoids the problem of introducing a single page is repeated.

　　2. common.js manner relative path into HTML

<script type="text/javascript" src="../js/common.js"></script>

　　If you have the best template HTML files, so just import the template HTML file it once.

Reproduced in: https: //www.cnblogs.com/lishaofei/p/5147869.html

Dynamic loading JS and CSS

Guess you like