// cssExpr 用于判断资源是否是css
|
// eslint-disable-next-line prefer-regex-literals
|
const cssExpr = new RegExp("\\.css")
|
const nHead = document.head || document.getElementsByTagName("head")[0]
|
// `onload` 在WebKit < 535.23， Firefox < 9.0 不被支持
|
const isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536
|
|
// 判断对应的node节点是否已经载入完成
|
function isReady(node) {
|
return node.readyState === "complete" || node.readyState === "loaded"
|
}
|
|
// loadCss 用于载入css资源
|
function loadCss(url, setting, callback) {
|
const node = document.createElement("link")
|
|
node.rel = "stylesheet"
|
addOnload(node, callback, "css")
|
node.async = true
|
node.href = url
|
|
nHead.appendChild(node)
|
}
|
|
// loadJs 用于载入js资源
|
function loadJs(url, setting, callback) {
|
const node = document.createElement("script")
|
|
node.charset = "utf-8"
|
addOnload(node, callback, "js")
|
node.async = !setting.sync
|
node.src = url
|
|
nHead.appendChild(node)
|
}
|
|
// 在老的webkit中，因不支持load事件，这里用轮询sheet来保证
|
function pollCss(node, callback) {
|
let isLoaded
|
|
if (node.sheet) {
|
isLoaded = true
|
}
|
|
setTimeout(function () {
|
if (isLoaded) {
|
// 在这里callback 是为了让样式有足够的时间渲染
|
callback()
|
} else {
|
pollCss(node, callback)
|
}
|
}, 20)
|
}
|
|
// 用于给指定的节点绑定onload回调
|
// 监听元素载入完成事件
|
function addOnload(node, callback, type) {
|
const supportOnload = "onload" in node
|
const isCSS = type === "css"
|
|
// 对老的webkit和老的firefox的兼容
|
if (isCSS && (isOldWebKit || !supportOnload)) {
|
setTimeout(function () {
|
pollCss(node, callback)
|
}, 1)
|
return
|
}
|
|
if (supportOnload) {
|
node.onload = onload
|
node.onerror = function (e) {
|
node.onerror = null
|
if (type === "css") {
|
console.error("该css文件不存在：" + node.href, e)
|
} else {
|
console.error("该js文件不存在：" + node.src, e)
|
}
|
onload()
|
}
|
} else {
|
node.onreadystatechange = function () {
|
if (isReady(node)) {
|
onload()
|
}
|
}
|
}
|
|
function onload() {
|
// 执行一次后清除，防止重复执行
|
node.onload = node.onreadystatechange = null
|
|
node = null
|
|
callback()
|
}
|
}
|
|
// 资源下载入口，根绝文件类型的不同，调用loadCss或者loadJs
|
function loadItem(url, list, setting, callback) {
|
// 如果加载的url为空，就直接成功返回
|
if (!url) {
|
setTimeout(function () {
|
onFinishLoading()
|
})
|
return
|
}
|
|
if (cssExpr.test(url)) {
|
loadCss(url, setting, onFinishLoading)
|
} else {
|
loadJs(url, setting, onFinishLoading)
|
}
|
|
// 每次资源下载完成后，检验是否结束整个list下载过程
|
// 若已经完成所有下载，执行回调函数
|
function onFinishLoading() {
|
const urlIndex = list.indexOf(url)
|
if (urlIndex > -1) {
|
list.splice(urlIndex, 1)
|
}
|
|
if (list.length === 0) {
|
callback()
|
}
|
}
|
}
|
|
function doInit(list, setting, callback) {
|
const cb = function () {
|
callback && callback()
|
}
|
|
list = Array.prototype.slice.call(list || [])
|
|
if (list.length === 0) {
|
cb()
|
return
|
}
|
|
for (let i = 0, len = list.length; i < len; i++) {
|
loadItem(list[i], list, setting, cb)
|
}
|
}
|
|
// 判断当前页面是否加载完
|
// 加载完，立刻执行下载
|
// 未加载完，等待页面load事件以后再进行下载
|
function ready(node, callback) {
|
if (isReady(node)) {
|
callback()
|
} else {
|
// 1500ms 以后，直接开始下载资源文件，不再等待load事件
|
const timeLeft = 1500
|
let isExecute = false
|
window.addEventListener("load", function () {
|
if (!isExecute) {
|
callback()
|
isExecute = true
|
}
|
})
|
|
setTimeout(function () {
|
if (!isExecute) {
|
callback()
|
isExecute = true
|
}
|
}, timeLeft)
|
}
|
}
|
|
// 暴露出去的Loader
|
// 提供async, sync两个函数
|
// async 用作异步下载执行用，不阻塞页面渲染
|
// sync 用作异步下载，顺序执行，保证下载的js按照数组顺序执行
|
const Loader = {
|
async: function (list, callback) {
|
ready(document, function () {
|
doInit(list, {}, callback)
|
})
|
},
|
|
sync: function (list, callback) {
|
ready(document, function () {
|
doInit(
|
list,
|
{
|
sync: true
|
},
|
callback
|
)
|
})
|
}
|
}
|
|
window.Loader = Loader;
|
