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

# 代码

create-static-resource.js

/**
 * Created by Capricorncd 2017-09-25
 * https://github.com/capricorncd
 */
(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>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

使用com.sun.imageio.plugins.png.PNGMetadata读取图片的元数据

所谓图片元数据,就是除了我们肉眼看到的图片内容外,隐藏在这些内容背后的一些技术数据。

984
来自专栏个人随笔

房上的猫:变量.数据类型与运算符

一.变量:  定义   变量是存储数据的一个基本单位,不同的变量相互独立  java常用数据类型   int 整数类形 long长整形 short短整型    ...

34014
来自专栏Python小屋

Python编程常见出错信息及原因分析(3)

(1)不可哈希错误 演示代码: >>> x = {[1], [2]} Traceback (most recent call last): File "<p...

4246
来自专栏静晴轩

JavaScript对象length

前几日有在Javascript数组操作一文中稍提及了数组的length属性;深入一点探究,就发现JS这length确有许多难为所知的特性。这就边学边探究下这朵奇...

3398
来自专栏Java帮帮-微信公众号-技术文章全总结

Java基础-day02-基础题

Java基础-day02-基础题 1.写出8种数据类型的名称及大小 ? Byte -- 一个字节 2的1*8次方 Short -- 两个字节 ...

3856
来自专栏和蔼的张星的图像处理专栏

684. 缺少的字符串分解到vector中借助find函数

先把两个字符串都分解到vector中,以空格为标志,然后在借助find函数来找出两个vector中不同的单词。

953
来自专栏机器学习算法与Python学习

Python: 早点知道这些就不会这样了

现在在Python 2的代码中都用import from future来导入Python 3的输出和除法。现在用到的几乎所有库都支持Python 3,因此会很快...

2594
来自专栏互联网杂技

javascript大法好,不用记

数组的操作 ---- Array.prototype.toString ( ) 把数组转变为字符串,返回字符串,arr.toString(); ---- Arr...

3447
来自专栏IMWeb前端团队

用原生js写一个"多动症"的简历

用原生js写一个"多动症"的简历 预览地址 源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js...

2417
来自专栏计算机视觉与深度学习基础

Leetcode 290. Word Pattern

Given a pattern and a string str, find if str follows the same pattern. Here ...

3399

扫码关注云+社区