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

为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护。所以我用js写了以下方法,存放在“sourceController.js”文件内。

/**
 * Created by MingChen on 2016/11/3.
 */
function sourceController() {
    this.root = "";

    this.callfunc = null; // 回调函数

    this.css = [];

    this.script = [];

    // css数量,兼容safari用
    var cssCount = document.styleSheets.length;

    // timeOut
    var tmpTimeOut = [];

    // 时间戳
    var startTime = null;

    /**
     * 设置文件根目录
     * @param url 根目录地址
     */
    this.setRoot = function (url) {
        this.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.push(url);
    };

    /**
     * 添加CSS文件 请在addSource钱调用
     * @param url css文件路径
     */
    this.addCss = function (url) {
        if (url === "" || url == null) return;
        // console.log("csslength:" + this.css.length);
        this.css.push(url);
    };

    /** 添加常用资源 */
    this.addSource = function () {
        addMeta([["name", "renderer"], ["content", "ie-comp"]]);

        createCss(this);
    };

    /**
     * 添加<link> 默认先加载css
     * @param obj 当前对象
     */
    function createCss(obj) {
        // 如果没有css文件,不加载
        if (obj.css.length <= 0) return;
        var url = obj.css.shift();
        // console.log(url);
        var css = document.createElement("link");
        css.setAttribute("rel", "stylesheet");
        if (obj.root != "") {
            url = obj.root + "/" + url;
        }
        css.href = url;

        // 老版本safari特殊处理,获取浏览器信息的方法请自己添加
        if (browserInfo().browser == "safari" && parseInt(browserInfo().version) < 6) {
            var timer = setInterval(function () {
                // console.log("timer cssCount:" + cssCount + " len:" + document.styleSheets.length);
                clearTmpTimeOut();
                if (document.styleSheets.length == cssCount && obj.css.length > 0) {
                    addTask(createCss, 0, obj);
                } else if (document.styleSheets.length == cssCount) {
                    // 如果有js文件,开始加载js
                    if (obj.script.length > 0) {
                        addTask(createJs, 0, obj);
                    } else {
                        obj.css.length = 0;
                        if (typeof obj.callfunc == "function") {
                            obj.callfunc();
                        }
                    }
                    clearInterval(timer);
                }
            }, 50);
        } else {
            css.onload = function () {
                clearTmpTimeOut();
                if (obj.css.length > 0) {
                    addTask(createCss, 0, obj);
                } else {
                    // 如果有js文件,开始加载js
                    if (obj.script.length > 0) {
                        addTask(createJs, 0, obj);
                    } else {
                        tmpTimeOut.length = 0;
                        obj.css.length = 0;
                        if (typeof obj.callfunc == "function") {
                            obj.callfunc();
                        }
                    }
                }
            };
        }
        document.getElementsByTagName("head")[0].appendChild(css);
        cssCount++;
    }

    /**
     * 添加<script> js加载完后执行回调函数
     * @param obj 当前对象
     */
    function createJs(obj) {
        // 如果没有js文件,不加载
        if (obj.script.length <= 0) return;
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', (obj.root) ? (obj.root + "/" + obj.script.shift()) : (obj.script.shift()));
        script.onload = script.onreadystatechange = function () {
            if (script.ready) {
                return false;
            }
            if (!script.readyState || script.readyState == "loaded" || script.readyState == 'complete') {
                script.onload = script.onreadystatechange = null;
                script.ready = true;
                clearTmpTimeOut();
                // console.log("time:" + (new Date().getTime() - startTime) + "ms " + script.getAttribute("src"));

                if (obj.script.length > 0) {
                    addTask(createJs, 0, obj);
                } else {
                    tmpTimeOut.length = 0;
                    obj.script.length = 0;
                    // 如果有回调函数 执行回调函数
                    if (typeof obj.callfunc == "function") {
                        obj.callfunc();
                    }
                }
            }
        };
        startTime = new Date().getTime();
        document.getElementsByTagName("body")[0].appendChild(script);
    }

    /**
     *添加一个任务,
     *    @param {Function} fun 任务函数名
     *    @param {number} delay 定时时间
     *    @param {object} params 传递到fun中的参数
     */
    function addTask(fun, delay) {
        var to = null;
        if (typeof fun == 'function') {
            var argu = Array.prototype.slice.call(arguments, 2);
            var f = (function () {
                fun.apply(null, argu);
            });
            to = window.setTimeout(f, delay);
            tmpTimeOut.push(to);
            return to;
        }
        to = window.setTimeout(fun, delay);
        tmpTimeOut.push(to);
    }

    // 清空加载计时器
    function clearTmpTimeOut() {
        while (tmpTimeOut.length > 0){
            var tto = tmpTimeOut.shift();
            window.clearTimeout(tto);
            tmpTimeOut.length = 0;
        }
    }
}

设置资源路径管理文件config.js。

/**
 * Created by MingChen on 2016/10/25.
 */
var sourcePath = {
    "iconfont": "css/iconfont/iconfont.css",
    "jquery": 'javascript/libs/jquery/jquery.js',
    "pieJS": "javascript/libs/PIEJS/PIE.js",
    "data": "javascript/publicData.js",
    // jquery-ui
    "cjqueryui": "css/jquery-ui.css",
    "jqueryui": 'javascript/libs/jquery/jquery-ui-1.11.4.js',
    // jqgrid
    "cjqgrid": "javascript/libs/jqgrid/ui.jqgrid.css",
    "jqgridcn":  "javascript/libs/jqgrid/grid.locale-cn.js",
    "jqgrid": "javascript/libs/jqgrid/jquery.jqGrid.js",
    // common
    "ccommon": "css/common.css",
    "common": "javascript/common.js",
    // header
    "cheader": "javascript/libs/headerMenu/css/headerMenu.css",
    "header": "javascript/libs/headerMenu/js/headerMenu.js",
    // circle
    "circle": "javascript/libs/raphael/cycle.js",
    "circleBar": "javascript/libs/raphael/raphael.js",
    // search
    "csearch": "javascript/libs/searchForm/css/searchForm.css",
    "search": "javascript/libs/searchForm/js/searchForm.js",
    // datePicker
    "datePicker": "javascript/libs/My97DatePicker/WdatePicker.js",
    // select2
    "cselect2": "javascript/libs/select2/css/select2.min.css",
    "select2min": "javascript/libs/select2/js/select2.min.js",
    "select2Func": "javascript/libs/select2/js/select2Func.js",
    // validator
    "cvalidator": "javascript/libs/validation/css/jqvForm.css",
    "validator": "javascript/libs/validation/js/jquery.validate.js",
    // dialog
    "cdialog": "javascript/libs/dialogBox/css/dialogBox.css",
    "dialog": "javascript/libs/dialogBox/js/dialogBoxUtils.js",
    // layer
    "clayer": "javascript/libs/layer/skin/layer.css",
    "layer": "javascript/libs/layer/layer.js"
};

在需要引入的页面只需要在<head>加入如下代码就可以一下子引入所有的常用资源了。为了显示美观在所有布局完成之间body设置visibility为hidden,布局完成后显示出来。

window.onload = function(){
    var sc = new sourceController();
    sc.setRoot("根目录地址");
    sc.css = [sourcePath.cjqueryui, sourcePath.cjqgrid];
    sc.script = [sourcePath.common, sourcePath.jquery, sourcePath.jqueryui, sourcePath.jqgrid];
    if(判断条件) // 根据需要额外添加的文件{ 
        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文件
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全栈之路

关于Canvas保存为图片

但是在webapp该方法是不行的,默认是不支持的。一种方法是在android的java代码写js接口,而一个纯webapp,确是很难做到(其实也不是),只不过找...

591
来自专栏BY的专栏

iOS开发 Xcode的各种调试、DEBUG

2755
来自专栏流柯技术学院

Selenium的PO模式(Page Object Model)[python版]

首先,我们要分离测试对象(元素对象)和测试脚本(用例脚本),那么我们分别创建两个脚本文件, LoginPage.py 用于定义页面元素对象,每一个元素都封装成组...

1392
来自专栏小灰灰

Java 借助ImageMagic实现图片编辑服务

Java 借助ImageMagic实现图片编辑服务 java原生对于图片的编辑处理并没有特别友好,而且问题也有不少,那么作为一个java后端,如果要提供图片的编...

4546
来自专栏程序员互动联盟

【专业技术第五讲】动态链接库及其用法

存在的疑惑: 动态链接库到底如何来使用?特别是windows上面 解决方案: 本篇我们讲Windows上的动态链接库(Dynamic Link Library ...

2967
来自专栏程序手艺人

快速画好一份程序流程图

工作中完成一个项目之后往往会花一些时间编写文档,画程序流程图。这样的好处是方便交接项目,后续也能够快速回忆。画流程图的软件有很多, 比如常用的Process,百...

4776
来自专栏小白鼠

Ionic3 表单处理

在项目中,可以使用angular中的 @angular/forms模块处理表单,但是并不需要在app.module中引用@angular/forms模块,因为在...

481
来自专栏大前端开发

如何使用FormData上传压缩裁剪后的图片Blob对象

在前端页面,我们通常会遇到需要用户上传图片的操作,可能还会在前端进行图片编辑的操作(比如头像的选区裁剪),然后如果图片过大的话,我们还会对图片进行压缩。这些功能...

503
来自专栏马洪彪

C#获取AD域中计算机和用户的信息

如果你的计算机加入了某个AD域,则可以获取该域中所有的计算机和用户的信息。 所用程序集,需要.Net Framework 4。 添加程序集引用 System.D...

3277
来自专栏吴伟祥

Apache Velocity-----基于Java的模板引擎

Apache Velocity是一个基于Java的模板引擎,它提供了一个模板语言去引用由Java代码定义的对象。Velocity是Apache基金会旗下的一个开...

992

扫码关注云+社区