创建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 条评论
登录 后参与评论

相关文章

来自专栏日常学python

一篇文章踩遍Python中的坑

这个问题是变量作用域问题,在gen=(x for _ in xrange(10))中gen是一个generator,在generator中变量有自己的一套作用域...

152
来自专栏分布式系统和大数据处理

基于业务对象(列表)的排序

在上一篇文章 基于业务对象的筛选 中,我们讨论了如何实现Predicate<T>(T object)委托,自定义DateFilter 类来对业务对象进行筛选。与...

762
来自专栏奔跑的蛙牛技术博客

什么是字节码?

字节码(Byte-code)是一种包含执行程序,由一序列 op 代码/数据对组成的二进制文件,是一种中间码。字节是电脑里的数据量单位。

1273
来自专栏大数据挖掘DT机器学习

Python一些基础面试题目总结

1 Python是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 一、对象的引用计数机制 pytho...

3336
来自专栏蘑菇先生的技术笔记

clojure基础入门(一)

983
来自专栏开发与安全

X86 寻址方式、AT&T 汇编语言相关知识、AT&T 与 Intel 汇编语言的比较、gcc 嵌入式汇编

注:本分类下文章大多整理自《深入分析linux内核源代码》一书,另有参考其他一些资料如《linux内核完全剖析》、《linux c 编程一站式学习》等,只是为了...

2820
来自专栏生信宝典

18式优雅你的Python

文章授权转载自 Python与算法之美,粗体文字为生信宝典的修改和补充。文后有生信宝典原创的系列Python学习教程(Python2和Python3)。

982
来自专栏Coding迪斯尼

ReactJs开发自制Monkey语言编译器:实现内嵌函数调用以及增加数组类型

772
来自专栏微信公众号:Java团长

Java编程要点之 I/O 流详解

字节流处理原始的二进制数据 I/O。输入输出的是8位字节,相关的类为 InputStream 和 OutputStream.

611
来自专栏醒者呆

编程语言的基础——搞定JavaIO

关键字:IO基础,JUnit生命周期,字节流,字符流,字符编码,对象流,序列化,反序列化 Java I/O 流是一组有顺序的,有起点和终点的字节集合。是对设...

3745

扫码关注云+社区