动态加载JS和CSS

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

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

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

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

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

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

　　1.编写common.js

/**
 * JS/CSS文件导入
 * @param filePath　文件路径
 * @param fileType　文件类型（js、css）
 * @return
 */
function loadJsOrCssFile(filePath){
    
    var isJsFile = /js$/i.test(filePath);
    var fileType = isJsFile ? "js" : "css";

    if (isIncludeFile(filePath, isJsFile)) {
        return;
    }

    if (fileType == "js"){

        var fileRef = document.createElement('script')
        fileRef.setAttribute("type","text/javascript")
        fileRef.setAttribute("src", filePath)
    }else if (fileType == "css"){

        var fileRef = document.createElement("link")
        fileRef.setAttribute("rel", "stylesheet")
        fileRef.setAttribute("type", "text/css")
        fileRef.setAttribute("href", filePath)
    }

    if (typeof fileRef != "undefined") {

        document.getElementsByTagName("head")[0].appendChild(fileRef)
    }
}

/**
 * 判断JS/CSS文件是否导入
 * @param fileName　文件名
 * @return 是否导入
 */
function isIncludeFile(fileName, isJsFile){
    
    var fileRefArray = document.getElementsByTagName(isJsFile ? 'script' : 'link');
    for(var i = 0,len = fileRefArray.length; i < len; i++) {
        if (fileRefArray[i][isJsFile ? 'src' : 'href'].indexOf(fileName) != -1) return true;
    }
    return false;
}

// 基础路径（绝对路径）
var basePath = "/smilenursecare/view/";
// JS文件存放路径（绝对路径）
var basePathJs = "/smilenursecare/view/js/";
// CSS文件存放路径（绝对路径）
var basePathCss = "/smilenursecare/view/css/";


// 导入共通的JS和CSS
loadJsOrCssFile(basePathCss + "general.css");
loadJsOrCssFile(basePath + "header/css/smart.css");
loadJsOrCssFile(basePath + "lib/TinyDropdown/style.css");

loadJsOrCssFile(basePathJs + "jquery-1.7.1.min.js");
loadJsOrCssFile(basePath + "lib/TinyDropdown/script.js");
loadJsOrCssFile(basePathJs + "corpus.js");
loadJsOrCssFile(basePathJs + "control.js");

// 导入选项卡相关的JS和CSS
function loadTabsFile(){
　　loadJsOrCssFile(basePath + "lib/tabs/ui.tabs.css");
　　loadJsOrCssFile(basePath + "lib/tabs/ui.core.js");
　　loadJsOrCssFile(basePath + "lib/tabs/ui.tabs.js");
}

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

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

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

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