如何使用js批量导入js和css

如何使用js导入js和css

如何优雅地导入js、css文件?

场景:在html中如果引入很多的css文件和js文件,html中head标签会显得非常冗余,那么我们就会想到如果一个文件导入全部的其他文件:

在这里插入图片描述
结合了其他人思路,这里将业务逻辑写到了一个js文件里面,只要调用此文件的启动方法即可。

// 注意顺序
var allFiles = [
    // jQuery
    'static/framework/jquery/jquery-3.5.1.js',
    'static/framework/jquery/jquery.cookie.js',
    // 剪切板插件
    'static/framework/clipboard/clipboard.js',
    // 魔性抖动
    'static/framework/csshake/csshake.css',
    // 字体图标
    'static/framework/fontawesome/css/font-awesome.css',
    // layui框架
    'static/framework/layui/layui.js',
    'static/framework/layui/css/layui.css',
    // 拖动排序插件
    'static/framework/sortable/Sortable.min.js',
    //Vue
    'static/framework/vue/vue.js',
    //ElementUI框架,需要放在Vue后面
    'static/framework/element-ui-2.13.2/lib/index.js',
    'static/framework/element-ui-2.13.2/lib/theme-chalk/index.css'
];

/**
 * 全局加载
 */
dororoFrameworkImportAll(allFiles);


/**
 * //TODO 三个方法组合为功能函数:js调用其他js或者css文件,实现批量导入
 * 导入本js需要在其他js之前,如此才能调用当前方法
 * @param allFiles
 */
// =========================================================================================================================
function dororoFrameworkImportAll(allFiles) {
    //如果是字符串则认为是单个文件,直接导入即可
    if (allFiles.constructor == String) {
        dororoFrameworkCreat(allFiles);
    }
    //如果是数组,则需要保证在前一个导入成功后再导入下一个js/css文件
    if (allFiles.constructor == Array) {
        dororoFrameworkLoop(allFiles, 0);
    }
}

/**
 *  //TODO 关键递归函数:利用递归处理数组的判断工作
 * @param allFiles  数组
 * @param i 下标
 * 参考资料:根据https://www.cnblogs.com/shuilangyizu/p/12525082.html进行改造
 */
function dororoFrameworkLoop(allFiles, index) {
    let currentImpurter = dororoFrameworkCreat(allFiles[index]);//执行导入
    //如果还不是数组的最后一个,则继续导入操作
    if ((index + 1) < allFiles.length) {
        //判断当前导入的元素是否导入成功,参考资料:https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html
        currentImpurter.onload = currentImpurter.onreadystatechange = function () {
            //如果currentImpurter加载成功则创建下一个引入,这样就不会由于后面的js依赖前面的js导致后面的js先加载而导致程序报错,
            //最常见的就是jQuery
            if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
                //递归
                dororoFrameworkLoop(allFiles, index + 1);//通过i+1实现循环
            }
        }
    }
}

/**
 *
 * @param file 期望导入的js、css文件的路径字符串
 * @returns {HTMLElement} js对象,用于在其他方法里面判断其创建成功与否
 * 参考资料:https://www.cnblogs.com/aui-js/p/12144946.html
 */
function dororoFrameworkCreat(uri) {
    //JS文件引入
    if (/^.+?\.js$/.test(uri)) {
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", uri);
        document.querySelector('head').appendChild(script);
        return script;
    }
    //CSS文件引入
    if (/^.+?\.css$/.test(uri)) {
        var css = document.createElement('link');
        css.rel = 'stylesheet';
        css.type = 'text/css';
        css.href = uri;
        document.querySelector('head').appendChild(css);
        return css;
    }
}

// =========================================================================================================================
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页