[FE] 如何动态加载js文件

1. innerHTML的问题

使用innerHTML插入<script>标签，其中的js文件是不会加载的，

document.getElementById('div1').innerHTML = `
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
`;

虽然DOM中有了这些节点，但是js文件还是没有加载，更没有被调用，

<div id="div1">
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
</div>

我们在控制台实验一下：

> window.jQuery
undefined

MDN中，对innerHTML的解释如下，

const name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a <script> tag inserted via innerHTML should not execute.

2. 动态创建

我们可以动态创建script元素，将它插入DOM中，来加载js文件，

const install = ({ src, success }) => {
    const script = document.createElement('script');

    script.src = src;
    script.async = false;    // 默认值为true
    script.onload = success;

    const head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
}

例子：

install({
    src: '//code.jquery.com/jquery-3.2.1.min.js'
});

install({
    src: './1.js'    // 内容为：alert(window.jQuery);
});

其中，script.async默认值为true，表示加载的js文件会异步执行，
MDN中，对async的解释如下，

async
A boolean attribute indicating that the browser should, if possible, execute the script asynchronously. This attribute must not be used if the src attribute is absent (i.e. for inline scripts). If it is included in this case it will have no effect. Dynamically inserted scripts execute asynchronously by default, so to turn on synchronous execution (i.e. scripts execute in the order they were loaded) set async=false.

如果设置了script.async = false;，
1.js会弹出提示function function(a,b){return new r.fn.init(a,b)}，

否则，在默认情况下，script.async为true，
1.js会弹出提示undefined。

---

参考

MDN: Element.innerHTML - Security considerations
MDN: <script> - async