Javascript加载方法.docx

Javascript加载方法Javascript加载方法Javascript文件动态加载一直是比较困扰的一件事情,像网络上传的比较常见的做法:functionloadjs(fileurl){varsct=document.createElement("script");sct.src=fileurl;document.head.appendChild(sct);}然后我们来测试一下结果:functionloadjs(fileurl){varsct=document.createElement("script");sct.src=fileurl;document.head.appendChild(sct);}loadjs("http://code.jquery.com/jquery-1.12.0.js");loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")loadjs("http://bootboxjs.com/bootbox.js")代码加载完后,会出现下图的错误：jquery明明是加载在第一个处理,为什么还是报jQuery不存在的`对象呢?因为这样加载，相当于开启了三个线程,只是jquery这个文件先启动线程,而jquery执行完这个线程的时间,超过了后面两个时间.因此后面执行完的,可能没能找到jquery这个对象。然这种方式怎么处理呢?其实文件的加载是有个状态处理的.文件的加载有个onload事件,就是可以监听文件是否加载完成的事件.因此我们可以考虑这个方法来处理我们想要的结果.我们用直观的方式来处理.改进后的代码如下：functionloadjs(fileurl,fn){varsct=document.createElement("script");sct.src=fileurl;if(fn){sct.onload=fn;}document.head.appendChild(sct);}loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){loadjs("http://bootboxjs.com/bootbox.js")})});OK,执行完这个代码之后,加载文件都是在前一个加载完成后,才会加载另外一个,这样就不会造成找不到用到的对象了.然后我们来执行一个弹出框的效果,代码里面使用了Bootbox.js插件.加载代码如下:loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){loadjs("http://bootboxjs.com/bootbox.js",function(){bootbox.alert("Helloworld!",function(){Example.show("Helloworldcallback");});})})});刷新页面,就会直接显示弹出框：动态加载的代码,往往容易在这里花费很多时间调试.大家最好的办法就是写一个最简单的例子,理解其中的原因.这里的代码都可以进行封装,还可以加入CSS文件的加载.作为自己的插件使用。