最近又回过头来看高程，看到DOM章节，其中动态加载js和css在日常开发中使用的频率较高，这里总结下，方便大家参考和我自己查阅。

一、动态加载js

动态加载javascript，原生方法就有好几种，下面我会具体罗列，但是原声方法多不兼容，甚至会有影响作用域的情况，建议使用jQuery的getscript。

方法一

function loadScript(url) {

        let script = document.createElement('script');

        script.type = 'text/javascript';
        script.src = url;
        document.body.appendChild(script);
}

loadScript('https://cdn.bootcss.com/jquery/3.2.1/jquery.js');

思路是先创建一个script标签，再给其设置type，src属性值，最后最后插入到body中。此方法不适用于 IE早期的浏览器，因为 IE早期的浏览器需要使用script标签的text属性来指定js代码，故其方法，存在不兼容性问题，不推荐。

方法二

function loadScriptCode (code) {

            let script = document.createElement('script');

            script.type = 'text/javascript';

            try {
                script.appendChild(document.createTextNode(code));
            } catch (ex) {
                        // IE早期的浏览器需要使用script标签的text属性来指定js代码
                script.text = code;
            }

            document.body.appendChild(script);
}

let demo = 'function demo() {alert('test');}';
loadScriptCode(text);
demo();

乍一看，此方法堪称完美，使用了try, catch 来处理兼容于各个浏览器，但是try, catch 会破坏作用域，故也不推荐使用。

方法三

$.getscript("https://cdn.bootcss.com/jquery/3.2.1/jquery.js");

使用jQuery的getscript方法，getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件 推荐，当然也可以使用$.ajax()方法，就不多叙了。

方法四

使用require 和 import方式，不过还不常用，作为了解就好了。

二、动态加载css

方法一

function loadStyle(url) {

            let link = document.createElement('link');
            link.type = 'text/css';
            link.rel = 'stylesheet';
            link.href = url;
            document.getElementsByTagName('head')[0].appendChild(link);
}
loadStyle('https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css');

其实原声动态加载css和加载js是很类似的，思想都是创建一个元素，给该元素添加属性及其属性值，再插入到页面中，只不过动态加载css的特别之处是最后要插入到head标签里，而不是body标签，这点切记。

方法二

fucntion loadStyle(cssText) {

            let style = document.createElement('style');

            style.type = 'text/css';

            try {
                style.appendChild(document.createElement('cssText'));
            } catch (ex) {
                // 处理IE兼容性问题 ，需要使用style元素的stylesheet属性的cssText属性
                style.stylesheet.cssText = cssText
            }
}

大家都只知道css样式的引入方式有外部引入，页内嵌入，行内样式这些，方法一讲述了使用link标签外部引入的方式，方法二介绍页内嵌入的style方式，倡导MVC模式的人，不用多说，也不会倡导该方法。

方法三

$('<link>').attr({

            rel: 'stylesheet',
            type: 'text/css',
            href: 'https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css'

}).appendTo('head');

看这里！看这里！又来jQuery了，比较推荐的方式，由jQuery方法的链式方法一句搞定，很爽有木有。😄

方法四

使用require 和 import方式，不常用，了解一下。

到这里就结束了，你记住这些常见的动态加载js和css的方式了吗，