为了方便资源管理和提升工作效率，常用的js和css文件的加载应该放在一个统一文件里面完成，也方便后续的资源维护。所以我用js写了以下方法，存放在“sourceController.js”文件内。
function sourceController（）{var root = "";var cssCount = 0; // css加载计数器var jsCount = 0; // js加载计数器this.callfunc = null; // 回调函数this.opt = {root : root};this.css = {css0 : "javaScript/bootstrap/css/bootstrap.css",css1 : "css/iconfont/iconfont.css",css2 : "css/common.css"};this.script = {script0 : "javaScript/jquery.js",script1 : "javaScript/bootstrap/js/bootstrap.js"};/* 设置文件根目录 * @param url 根目录地址 */this.setRoot = function（url）{root = url;};/* 设置回调函数 * @param func 回调函数 */this.setCallBack = function（func）{this.callfunc = func;};/* 添加Script文件 请在addSource钱调用 * @param url script文件路径 */this.addScript = function（url）{if （url === "" || url == null） return;this.script["script" + Object.getOwnPropertyNames（this.script）.length] = url;};/* 添加CSS文件 请在addSource钱调用 * @param url css文件路径 */this.addCss = function（url）{if （url === "" || url == null） return;this.css["css" + Object.getOwnPropertyNames（this.css）.length] = url;};/* 添加常用资源 */this.addSource = function（）{console.log（"Source"）;addMeta（[["http-equiv", "X-UA-Compatible"],["content", "IE=edge"]]）;addMeta（[["name", "viewport"],["content", "width=device-width, initial-scale=1"]]）;createCss（this）;};/* 回调函数 * @param func 回调方法 * @param obj 当前对象 */function callback（obj）{console.log（"func run"）;obj.callfunc（）;}/* 添加<link> 默认先加载css * @param obj 当前对象 */function createCss（obj）{// 如果没有css文件，不加载if（Object.getOwnPropertyNames（obj.css）.length <= 0） return;var url = obj.css["css" + cssCount];console.log（url）;var css = document.createElement（"link"）;css.setAttribute（"rel", "stylesheet"）;if （root ！= ""） {url = root + "/" + url;}css.href = url;document.getElementsByTagName（"head"）[0].appendChild（css）;css.onload = function（）{cssCount++;if （cssCount < Object.getOwnPropertyNames（obj.css）.length）{createCss（obj）;}else{// 如果有js文件，开始加载jsif（Object.getOwnPropertyNames（obj.script）.length > 0）{createJs（obj）;}}};}/* 添加<script> js加载完后执行回调函数 * @param obj 当前对象 */function createJs（obj）{// 如果没有js文件，不加载if（Object.getOwnPropertyNames（obj.script）.length <= 0） return;var url = obj.script["script" + jsCount];console.log（"time:" + new Date（）.getTime（） + " " + url）;var script = document.createElement（"script"）;script.setAttribute（"type","text/javascript"）;if （root ！= ""） {url = root + "/" + url;}script.src = url;document.getElementsByTagName（"head"）[0].appendChild（script）;script.onload = function（）{jsCount++;if （jsCount < Object.getOwnPropertyNames（obj.script）.length）{createJs（obj）;}else{// 如果有回调函数 执行回调函数if（obj.callfunc ！= null）{callback（obj）;}}}}/* 添加meta * @param attr meta属性，为二维数组 */function addMeta（attr）{console.log（"meta"）;var meta = document.createElement（"meta"）;for （var i = 0; i < attr.length; i++）{meta.setAttribute（attr[i][0], attr[i][1]）;}document.getElementsByTagName（"head"）[0].appendChild（meta）;}}在需要引入的页面只需要在<head>加入如下代码就可以一下子引入所有的常用资源了。为了显示美观在所有布局完成之间body设置visibility为hidden，布局完成后显示出来。
window.onload = function（）{var sc = new sourceController（）;sc.addCss（"css/index.css"）; // 额外添加的css文件，必须在加载资源之前加入sc.addScript（"javaScript/index.js"）; // 额外添加的js文件，必须在加载资源之前加入sc.setCallBack（function（）{document.body.style.display = "block"; // 显示body}）;sc.addSource（）; // 加载常用的js和css文件};以上就是小编为大家带来的常用js,css文件统一加载方法（推荐） 并在加载之后调用回调函数的全部内容了，希望对大家有所帮助，多多支持脚本之家~
易网时代-编程资源站