您的位置：首页 > Web前端 > CSS

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

2017-09-26 15:21 483 查看

# 代码

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航