炫意html5
最早CSS3和HTML5移动技术网站之一

模块化cmd,amd中动态加载资源问题

前言

今天主要讨论一下cmd和amd中运用loadjs等方式动态加载资源遇到的问题。当然,amd和cmd是比较老的前端模块化技术了。类似我之前文章提到的requirejs,这种方式下运用loadjs中遇到的问题。

前端动态加载资源

我这里列举一下我平时用的比较多的loadjs和css等的函数吧

/*
desc:加载资源类库
auth:炫H5 博客
*/
// 加载CSS
export function LoadCss (id, content) {
var newStyle = document.createElement('style')
newStyle.type = 'text/css'
newStyle.id = id
if (typeof newStyle.styleSheet != 'undefined') {
newStyle.styleSheet.cssText = content
} else {
newStyle.innerHTML = content
}
document.getElementsByTagName('head')[0].appendChild(newStyle)
}
// 加载JS
export function LoadJS (url, callback, errcallback) {
var documentHeader = document.head || document.getElementsByTagName('head')[0]
// 防止单页应用加载多次
var addSign = true
var scripts = document.getElementsByTagName('script')
for (var i = 0; i < scripts.length; i++) {
if (scripts[i] && scripts[i].src && scripts[i].src.indexOf(url) != -1) {
addSign = false
}
}
if (addSign) {
var script = document.createElement('script')
script.type = 'text/javascript'
script.charset = 'utf-8'
script.async = true
script.src = url
documentHeader.appendChild(script)
script.onload = function () {
callback && callback()
}
script.onerror = function () {
errcallback && errcallback()
documentHeader.removeChild(script)
}
} else {
callback && callback()
}
}
// 加载CSS引用
export function LoadLink (url) {
// 防止单页应用加载多条
var addSign = true
var links = document.getElementsByTagName('link')
for (var i = 0; i < links.length; i++) {
if (links[i] && links[i].href && links[i].href.indexOf(url) != -1) {
addSign = false
}
}
if (addSign) {
var link = document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = url
document.getElementsByTagName('head')[0].appendChild(link)
}
}
// js删除script
export function removeScript(src) {
var scripts = document.getElementsByTagName('script')
for (var i = 0; i < scripts.length; i++) {
if (scripts[i] && scripts[i].src && scripts[i].src.indexOf(src) != -1) {
scripts[i].parentNode.removeChild(scripts[i])
}
}
}
// js删除link文件
export function removelink(href) {
var links = document.getElementsByTagName('link')
for (var i = 0; i < links.length; i++) {
if (links[i] && links[i].href && links[i].href.indexOf(href) != -1) {
links[i].parentNode.removeChild(links[i])
}
}
}

上面是我常用的一些动态加载和删除资源的一些方式。但是这种方式在RequireJS等中运用有时候会有问题,例如加载swiper

例如如下:

require(["js/student", "js/class"], function(student, clz) {
LoadJS('./炫H5/swiper.min.js',function(){
console.log(swiper)
})
});

这个时候会爆出swiper is not defined错误。

原因是因为

require是封闭的引用,loadjs是在头部添加标签,而swiper是umd及es的方式打包的。因此,在封闭的作用域下面获取不到值。

因此,loadjs方式引用的js必须是iife方式打包,或者是暴露全局作用域才可以。

解决方案:

下载swiper源码,用rollup重新打包,打包成iife的方式就可以了。

将swiper源码 script/build-js.js中的打包方式替换成iife,例如如下:

then(bundle => bundle.write({
format: 'iife',
name: 'Swiper',
strict: true,
sourcemap: env === 'development',
sourcemapFile: `./${env === 'development' ? 'build' : 'dist'}/js/swiper.js.map`,
banner,
file: `./${env === 'development' ? 'build' : 'dist'}/js/swiper.js`,
})).then(() => {
if (env === 'development') {
if (cb) cb();
return;
}

这样打包好了的swiper就可以用loadjs在amd和cmd等方式中引用了。

炫意HTML5 » 模块化cmd,amd中动态加载资源问题

Java基础教程Android基础教程