了解Javascript文件的动态加载

动态加载Javascript文件一直是一件麻烦的事情，就像：一样，这是一种在互联网上上传的常见做法。

函数load js(file URL){ var SCT=document . createelement(' script ')；sct.src=fileurldocument . head . appendchild(SCT)；}那我们来测试一下结果：

html head link rel='样式表' type=' text/CSS ' href='//maxcdn . bootstrapcdn.com/bootstrap/3 . 3 . 2/CSS/bootstrap . min . CSS ' media=' screen '/head body script function load js(file URL){ var SCT=document . create element(' script ')；sct.src=fileurldocument . head . appendchild(SCT)；} load js(' http://code . jquery.com/jquery-1 . 12 . 0 . js ')；加载加载js(' http://maxcdn . bootstrapcn.com/bootstrap/3 . 3 . 2/js/bootstrap . min . js ')加载js(' http://bootbox js.com/bootbox . js ')/script/body/html代码后，会出现下图中的错误：

JQuery显然是在第一次处理时加载的。为什么仍然报告jquery不存在的对象？

因为用这种方式加载相当于启动三个线程，但是文件jquery先启动线程，jquery执行这个线程的时间比接下来的两次还要长。因此，执行后可能找不到对象jquery。

但是，如何处理这种方式呢？

实际上，文件加载有一个状态处理。文件加载有一个onload事件，这是一个可以监视文件是否完全加载的事件。

因此，我们可以考虑用这种方法来处理我们想要的结果。我们以直观的方式处理它。改进后的代码如下：

html head link rel='样式表' type=' text/CSS ' href=' http://max cdn . bootstrapcdn.com/bootstrap/3 . 3 . 2/CSS/bootstrap . min . CSS ' media=' screen '/head body script function load js(file URL，fn){ var SCT=document . createelement(' script ')；sct.src=fileurlif(fn){ SCT . on load=fn；} document . head . appendchild(SCT)；} load js(' http://code . jquery.com/jquery-1 . 12 . 0 . js '，function(){ load js(' http://max cdn . bootstrapcdn.com/bootstrap/3 . 3 . 2/js/bootstrap . min . js '，function(){ load js(' http://bootbox js.com/bootbox . js ')})；/script /body/htmlOK，执行完这段代码后，加载文件会一直加载到上一个，这样就不会导致找不到使用的对象。

然后我们将执行弹出框的效果，它使用了Bootbox.js插件。加载代码如下：

load js(' http://code . jquery.com/jquery-1 . 12 . 0 . js '，function(){ load js(' http://max cdn . bootstrapcdn.com/bootstrap/3 . 3 . 2/js/bootstrap . min . js '，function(){ load js(' http://bootboxjs.com/bootbox . js '，function(){ bootbox . alert(' Hello world！'，function(){ example . show(' Hello world callback ')；});}) }) });刷新页面，将直接显示弹出框：

在这里很容易花费大量时间调试动态加载的代码。对每个人来说，最好的方法是写一个简单的例子，并理解原因。这里所有的代码都可以封装，可以添加CSS文件加载。它们可以用作自己的插件。