常用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 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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利用str_replace防注入的方法
2013/11/10 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python dlib人脸识别代码实例
2019/04/04 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
酒店温馨提示语
2015/07/14 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript