常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数


Posted in Javascript onSeptember 23, 2016

为了方便资源管理和提升工作效率,常用的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文件,开始加载js
        if(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文件统一加载方法(推荐) 并在加载之后调用回调函数的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
React Hook用法示例详解(6个常见hook)
Apr 28 Javascript
form表单转Json提交的方法(推荐)
Sep 23 #Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 #Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 #Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 #Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 #Javascript
值得分享的bootstrap table实例
Sep 22 #Javascript
第一次动手实现bootstrap table分页效果
Sep 22 #Javascript
You might like
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP查询网站的PR值
2013/10/30 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php判断是否为json格式的方法
2014/03/04 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
php解决安全问题的方法实例
2019/09/19 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python类的继承用法示例
2019/01/31 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python下载的11种姿势(小结)
2020/11/18 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
Java基础知识面试题
2014/03/25 面试题
护士毕业自我鉴定
2014/02/07 职场文书
《王二小》教学反思
2014/02/27 职场文书
企业文化标语口号
2014/06/09 职场文书
邓小平理论心得体会
2014/09/09 职场文书
小学推普周活动总结
2015/05/07 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书