前端动态载入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);
 };