创建script、link标签，预加载js/css方法createStaticResourceElement(CSRE)

本文介绍了一个使用JavaScript编写的静态资源加载器，该加载器能够帮助开发者轻松地按需加载CSS和JS文件，并提供了错误处理及加载完成回调等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

# 代码

create-static-resource.js

/**
 * Created by Capricorncd 2017-09-25
 */
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && (define.amd || define.cmd) ? define(factory) :
            global.CSRE = factory();
}(this, function () {

    'use strict';

    var CODES = {
        1: 'This paths is not an array'
    }

    // var DEFAULTS = {
    //     // 资源地址
    //     paths: [],
    //     // css link插入位置
    //     linkInsert: 'head',
    //     // script插入位置
    //     scriptInsert: 'body'
    //     // loadend: function () {
    //     // },
    //     // error: function (el) {
    //     // }
    // }

    // constructor
    // Create Static Resource Element
    function CSRE(opts) {
        this.opts = opts;
        this.createStaticElements(function () {
            opts.loadend && opts.loadend();
        })
    }

    var fn = CSRE.prototype;

    // 创建Elements
    fn.createStaticElements = function (callback) {
        // 判断this.paths是否为数组
        if (!this.opts.paths || !this.opts.paths instanceof Array) {
            callback({
                code: 1,
                msg: CODES[1]
            });
            return;
        }
        var _this = this;
        // 数组长度
        var len = this.opts.paths.length;
        // 已处理完成数量
        var count = 0;

        // 只处理js, css文件
        for (var i = 0; i < len; i++) {
            var val = this.opts.paths[i];
            if (/\w+\.js/.test(val)) {
                this.createScriptElement(val, loadEnd, loadError);
            }
            if (/\w+\.css/.test(val)) {
                this.createLinkElement(val, loadEnd, loadError);
            }
        } // end of for

        function loadEnd(el) {
            count++;
            if (count === len) callback();
            // console.log(el);
        }

        function loadError(el) {
            _this.opts.error && _this.opts.error(el);
            count++;
            if (count === len) callback();
        }
    }

    // 创建script元素节点
    fn.createScriptElement = function (src, loadend, loadErr) {
        var el = this.opts.scriptInsert || 'body';
        var script = document.createElement('script');
        if (script.addEventListener) {
            script.addEventListener("load", function (e) {
                loadend(this);
            }, false);
            script.addEventListener("error", function (e) {
                loadErr(this);
            }, false);
        } else if (script.attachEvent) {
            script.attachEvent("onreadystatechange", function () {
                var target = window.event.srcElement;
                if (target.readyState === "loaded" || target.readyState === "complete") {
                    loadend.call(target);
                } else {
                    loadErr.call(target);
                }
            });
        }
        if (window.jQuery) {
            jQuery(el).append(script);
        } else {
            document.querySelector(el).appendChild(script);
        }
        script.src = src;
    }

    // 创建link(style)元素节点
    fn.createLinkElement = function (href, loadend, loadErr) {
        var el = this.opts.linkInsert || 'head';
        // <link href="./static/css/common.min.css" rel="stylesheet" type="text/css">
        var link = document.createElement('link');
            link.href = href;
            link.setAttribute('rel', 'stylesheet');
            link.setAttribute('type', 'text/css');
        if (window.jQuery) {
            jQuery(el).append(link);
        } else {
            document.querySelector(el).appendChild(link);
        }

        link.onload = function () {
            loadend(this);
        }
        link.onerror = function () {
            loadErr(this);
        }
    }

    return CSRE;

}));

# 使用

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create Static Resource Element</title>
</head>
<body>
<div id="app">
    <h1>DEMO</h1>
    <div>Create Static Resource Element</div>
</div>
<script src="create-static-resource.js"></script>
<script>
    var Csre = new CSRE({
        // 静态资源相对路径或url
        paths: [
            // js、css url或资源路径
            'https://www.baidu.com/css/common.201709251646.css',
            'https://www.baidu.com/js/common.201709251646.js',
            'https://www.baidu.com/js/plugins.201709251646.js'
        ],
        loadend: function () {
            // 加载完成
        },
        error: function (errElement) {
            // 每次onerror均会输出
        },
        // link元素插入位置(可选参数)
        // 默认值 head，即添加到head内
        linkInsert: 'head',
        // script元素插入位置(可选参数)
        // 默认值 body，即添加到body内
        scriptInsert: 'body'
    });
</script>
</body>
</html>