如何统一加载常用js和css文件
2017-11-02 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
为了方便资源管理和提升工作效率，常用的js和css文件的加载应该放在一个统一文件里面完成，也方便后续的资源维护。所以我用js写了以下方法，存放在“sourceController.js”文件内。
/**
* Created by Administrator on 2016/9/10. */function sourceController(){ var root = ""; // 根路径
this.opt = {
root : root
}; // css存储路径
this.css = {
css0 : "javaScript/bootstrap/css/bootstrap.css",
css1 : "css/iconfont/iconfont.css"
}; // js存储路径
this.script = {
script0 : "javaScript/jquery.js",
script1 : "javaScript/bootstrap/js/bootstrap.js"
}; /* 设置文件根目录
* @param url 根目录地址 */
this.setRoot = function(url){
root = url;
}; /* 添加常用资源 */
this.addSource = function(){
addMeta([["http-equiv", "X-UA-Compatible"],["content", "IE=edge"]]);
addMeta([["name", "viewport"],["content", "width=device-width, initial-scale=1"]]); for (var i = 0; i < Object.getOwnPropertyNames(this.css).length; i++){ this.addCss(this.css["css" + i]);
} for (var i = 0; i < Object.getOwnPropertyNames(this.script).length; i++){ this.addScript(this.script["script" + i]);
}
}; /* 添加Script文件
* @param url script文件路径 */
this.addScript = function(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);
}; /* 添加CSS文件
* @param url css文件路径 */
this.addCss = function(url){ var css = document.createElement("link");
css.setAttribute("rel", "stylesheet"); if (root != "") {
url = root + "/" + url;
}
css.href = url;
document.getElementsByTagName("head")[0].appendChild(css);
}; /* 回调函数
* @param func 回调方法 */
this.callback = function(func){
setTimeout(func,50); // 为了让文件加载完成，页面排布完毕 }; /* 添加meta
* @param attr meta属性，为二维数组 */
function addMeta(attr){ 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，布局完成后显示出来。
<script src="javaScript/sourceController.js"></script>
<script>
window.onload = function(){ var sc = new sourceController();
sc.addSource();
sc.addCss("css/common.css"); // 额外需要添加的css文件
sc.addScript("javaScript/index.js"); // 额外需要添加的js文件
sc.callback(function(){
document.body.style.display = "block"; // 所有布局完成后的回调方法，可以根据个人需要定义 });
};</script>
/**
* Created by Administrator on 2016/9/10. */function sourceController(){ var root = ""; // 根路径
this.opt = {
root : root
}; // css存储路径
this.css = {
css0 : "javaScript/bootstrap/css/bootstrap.css",
css1 : "css/iconfont/iconfont.css"
}; // js存储路径
this.script = {
script0 : "javaScript/jquery.js",
script1 : "javaScript/bootstrap/js/bootstrap.js"
}; /* 设置文件根目录
* @param url 根目录地址 */
this.setRoot = function(url){
root = url;
}; /* 添加常用资源 */
this.addSource = function(){
addMeta([["http-equiv", "X-UA-Compatible"],["content", "IE=edge"]]);
addMeta([["name", "viewport"],["content", "width=device-width, initial-scale=1"]]); for (var i = 0; i < Object.getOwnPropertyNames(this.css).length; i++){ this.addCss(this.css["css" + i]);
} for (var i = 0; i < Object.getOwnPropertyNames(this.script).length; i++){ this.addScript(this.script["script" + i]);
}
}; /* 添加Script文件
* @param url script文件路径 */
this.addScript = function(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);
}; /* 添加CSS文件
* @param url css文件路径 */
this.addCss = function(url){ var css = document.createElement("link");
css.setAttribute("rel", "stylesheet"); if (root != "") {
url = root + "/" + url;
}
css.href = url;
document.getElementsByTagName("head")[0].appendChild(css);
}; /* 回调函数
* @param func 回调方法 */
this.callback = function(func){
setTimeout(func,50); // 为了让文件加载完成，页面排布完毕 }; /* 添加meta
* @param attr meta属性，为二维数组 */
function addMeta(attr){ 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，布局完成后显示出来。
<script src="javaScript/sourceController.js"></script>
<script>
window.onload = function(){ var sc = new sourceController();
sc.addSource();
sc.addCss("css/common.css"); // 额外需要添加的css文件
sc.addScript("javaScript/index.js"); // 额外需要添加的js文件
sc.callback(function(){
document.body.style.display = "block"; // 所有布局完成后的回调方法，可以根据个人需要定义 });
};</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
