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

相关文章

来自专栏杨龙飞前端

scrollto 到指定位置

2994
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

39510
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2787
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5288
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

27510
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

4269
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

3017
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3715
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3025
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7426

扫码关注云+社区