动态加载JS和CSS

采用了HTML和CSS/JS分离的形式来设计页面，这样就意味着需要通过链式导入的方式将需要的文件导入到HTML文件中，这样做达到了分离的目的，可也会带来一些问题。

　　1.同一个CSS或JS在每个页面都需要导入一次，这必然导致了代码的重复。

　　2.导入路径的写法，是用绝对路径还是相对路径？

　　　　①绝对路径：必须从项目的根路径写起，如果项目改名或者文件重命名就会导致所有HTML页面的导入路径都需要改一遍，这显然太大费周章了。

　　　　②相对路径：如果HTML页面文件的层级不一致，就会导致我需要判断导入的文件相对该HTML页面是在哪个层级，然后去写多少个“../”，这样才能正确引入。

解决以上问题，只要通过一个共通的JS文件（例如common.js），然后以JS代码动态导入的方式就可以解决。

　　1.编写common.js

 1 /**
 2  * JS/CSS文件导入
 3  * @param filePath　文件路径
 4  * @param fileType　文件类型（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     if (isIncludeFile(filePath, isJsFile)) {
13         return;
14     }
15 
16     if (fileType == "js"){
17 
18         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 fileRef != "undefined") {
30 
31         document.getElementsByTagName("head")[0].appendChild(fileRef)
32     }
33 }
34 
35 /**
36  * 判断JS/CSS文件是否导入
37  * @param fileName　文件名
38  * @return 是否导入
39  */
40 function isIncludeFile(fileName, isJsFile){
41     
42     var fileRefArray = document.getElementsByTagName(isJsFile ? 'script' : 'link');
43     for(var i = 0,len = fileRefArray.length; i < len; i++) {
44         if (fileRefArray[i][isJsFile ? 'src' : 'href'].indexOf(fileName) != -1) return true;
45     }
46     return false;
47 }
48 
49 // 基础路径（绝对路径）
50 var basePath = "/smilenursecare/view/";
51 // JS文件存放路径（绝对路径）
52 var basePathJs = "/smilenursecare/view/js/";
53 // CSS文件存放路径（绝对路径）
54 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");
66 
67 // 导入选项卡相关的JS和CSS
68 function 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

　　利用loadJsOrCssFile()函数，可自定义选择加载哪些文件。路径可定义多个，因为定义的是绝对路径，所以无需担心相对路径带来的层级问题，如果项目改名或者文件路径修改了，只需要修改基础路径的变量值就可以了，这样做增强了项目的可移植性和灵活性。另外，loadTabsFile()这类函数也可根据需要定义多个并且加载内容不同，这样根据需要导入相应的内容，同时isIncludeFile()函数的验证也有效避免了单个页面重复导入的问题。

　　2.将common.js以相对路径的方式导入到HTML

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

　　如果有模板HTML文件最好，这样只需要在模板HTML文件导入一次就可以了。

转载于:https://www.cnblogs.com/lishaofei/p/5147869.html

猜你喜欢