常用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 Onunload与Onbeforeunload使用小结
Dec 31 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
详解js前端代码异常监控
Jan 11 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
在微信小程序中使用vant的方法
Jun 07 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
解析isset与is_null的区别
2013/08/09 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
全面理解Python中self的用法
2016/06/04 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python使用Matlab命令过程解析
2020/06/04 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
美食节策划方案
2014/05/26 职场文书
怎样写离婚协议书
2014/09/10 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
煤矿隐患排查制度
2015/08/05 职场文书