动态加载JS文件，避免Error : xxx is undefined

我们可以在页面动态添加<script>标签来动态加载js文件：

function loadScript(url)
{
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;
   head.appendChild(script);
}

但是如果直接在loadScript()函数后调用js文件里的变量，如：

loadScript("http://www.xxx.com/js/my.js");
test.doSometing();  //test为my.js里定义的变量

这样会导致错误：

Error:test is undefined

如果要使用动态加载的js文件里的变量需要等js文件加载完成后才能调用，可以受用onload来监听js文件是否加载完。loadScript函数添加回调如下：

function loadScript(url, callback)
{
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;
   script.onload = callback;
   head.appendChild(script);
}

使用

loadScript("my.js", function() {
  test.doSometing();
});

jQuery也提供了类似动态加载js文件的方法：

$.getScript("my_lovely_script.js", function() {
    alert("Script loaded and executed.");
});