按需加载的那些事儿

ゝ一世哀愁。 2022-06-05 09:17 347阅读 0赞

#### 前言：最近很多地方都出现了按需加载这个东西，第一次接触是在使用element-ui的时候，后面在用easyui做管理信息系统的时候也发现了这个东西。想着还是来总结一下，因为这的确是一个非常有用的东西，极大了减少了引入文件的大小，也减轻了服务器的压力。笔者认为在未来这个一定会成为一种趋势 ####

#### 1、动态样式 ####

在说按需加载之前，我们先来聊聊动态样式。动态样式是什么呢？其实就是根据需要进行动态加载样式。下面我们进行一个简单的实现。  
首先我们定义好一个btn.css文件

.btn { width: 120px; height: 40px; border: none; background-color: orange; color: white; cursor: pointer; outline: none; }
    .btn:hover { background-color: #EE7600; }

然后在我们页面进行样式的动态添加

<button class="btn">我是按钮</button>
    <script> window.onload = function() { var cssLink = document.createElement("link"); cssLink .rel = "stylesheet"; cssLink .type = "text/css"; cssLink .href = "btn.css"; var head = document.getElementsByTagName("head")[0]; head.appendChild(cssLink ); } </script>

通过动态样式，我们大概就知道了按需加载是怎么实现的了，我们下面来简单实现一个按需加载的例子。  
loader.js（核心文件）

//模块文件
    var modules = {
        btn: {
            css: "btn",
            js: "btn"
        },
        circleBtn: {
            css: 'circle-btn',
            dependencies: ['btn']
        },
        menu: {
            class: 'menu',
        }
    }
    //加载CSS文件
    function loadCss(url) { 
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "css/"+url+".css";
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(link);
    }
    //加载JavaScript文件
    function loadJs(url) { 
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.language = 'javascript';
        script.src = "js/"+url+".js";
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(script);
    }
    //去除数组中重复的内容
    function removeRepeat(args) { 
        var result = [];
        for(var i=0; i<args.length; i++) {
            if(result.indexOf(args[i]) < 0) {
                result.push(args[i]);
            }
        }
        return result;
    }
    //需要引入的css
    var cssArray = [];
    //需要引入的JavaScript
    var jsArray = [];
    //遍历模块
    for(module in modules) {
        var cssName = modules[module]['css'];
        var jsName = modules[module]['js'];
        var objects = document.querySelectorAll("."+cssName);
        if(objects.length){
            cssArray.push(cssName);
            if(jsName) {
                jsArray.push(jsName);
            }
        }
        var dependencies = modules[module]['dependencies'];
        if(dependencies) {
            for(var i=0; i<dependencies.length; i++) {
                var dependenciesCSS = modules[dependencies[i]]['css'];
                var dependenciesJS = modules[dependencies[i]]['js'];
                for(var j=0; j<objects.length; j++) {
                    objects[j].classList.add(dependenciesCSS);
                }
                cssArray.push(dependenciesCSS);
                jsArray.push(dependenciesJS);
            }
        }
    }
    cssArray = removeRepeat(cssArray);
    jsArray = removeRepeat(jsArray);
    //加载css
    for(var i=0; i<cssArray.length; i++) {
        loadCss(cssArray[i]);
    }
    //加载JavaScript
    for(var i=0; i<jsArray.length; i++) {
        loadJs(jsArray[i]);
    }

如果想要源码，可以在我的**[github][]**上获取

[github]: https://github.com/deng1234/demand-loading