js动态载入js/css
前言
js动态载入js/css和设置自适应字体
一、js动态载入js或者css文件
1、封装insertScript方法可以动态载入js资源文件且不会重复载入
1、封装loadCssFileW方法可以动态载入css资源文件且不会重复载入
filesTools = {
jsFileList: {
},
insertScript: function (url, callback, delay) {
this.jsFileList = this.jsFileList || {
};
function loadJs() {
const d = document;
let s = d.createElement('script');
s.type = 'text/javascript';
s.charset = 'utf-8';
if (s.readyState) {
// IE
s.onreadystatechange = function () {
if (s.readyState === 'loaded' || s.readyState === 'complete') {
s.onreadystatechange = null;
Pass.jsFileList[url] = true;
callback && callback();
}
};
} else {
s.onload = function () {
this.jsFileList[url] = true;
callback && callback();
};
}
s.src = url;
d.getElementsByTagName('head')[0].appendChild(s);
}
if (!this.jsFileList[url]) {
if (delay) {
setTimeout(function () {
loadJs();
}, 100);
} else {
loadJs();
}
} else {
callback && callback();
}
},
loadCssFileW: function (url, callback) {
window._loadedFilesW = window._loadedFilesW || {
};
if (!window._loadedFilesW[url]) {
window._loadedFilesW[url] = true;
let l = document.createElement('link');
l.rel = 'stylesheet';
l.type = 'text/css';
l.href = url;
document.getElementsByTagName('head')[0].appendChild(l);
if (l.readyState) {
// IE
l.onreadystatechange = function () {
if (l.readyState === 'loaded' || l.readyState === 'complete') {
l.onreadystatechange = null;
callback && callback();
}
};
} else {
l.onload = function () {
callback && callback();
};
}
} else {
callback && callback();
}
}
};
二、js设置自适应字体大小
1、实时监听resize事件获取视口宽clientWidth进行动态字体大小调整
2、将document.documentElement赋值给html根元素,这样使用rem单位将以该字体大小为基准
let currClientWidth;
let fontValue;
let originWidth;
originWidth = 414;
function resize() {
currClientWidth = document.documentElement.clientWidth;
if (currClientWidth < 320) {
currClientWidth = 320;
}
if (currClientWidth > 414) {
currClientWidth = 414;
}
fontValue = (currClientWidth / originWidth) * 10;
document.documentElement.style.fontSize = fontValue + 'px';
}
window.px2rem = function (px) {
return px / (16 * fontValue / 100);
};
export default () => {
resize();
window.addEventListener('resize', resize, false);
};