Javascript加載方法

　　Javascript文件動(dòng)態(tài)加載一直是比較困擾的一件事情,像網(wǎng)絡(luò )上傳的比較常見(jiàn)的做法:

　　function loadjs(fileurl){ var sct = document.createElement("script"); sct.src = fileurl; document.head.appendChild(sct);}

　　然后我們來(lái)測試一下結果:

　　function loadjs(fileurl){ var sct = 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")

　　代碼加載完后,會(huì )出現下圖的錯誤：

　　jquery明明是加載在第一個(gè)處理,為什么還是報jQuery不存在的對象呢?

　　因為這樣加載，相當于開(kāi)啟了三個(gè)線(xiàn)程,只是jquery這個(gè)文件先啟動(dòng)線(xiàn)程,而jquery執行完這個(gè)線(xiàn)程的時(shí)間,超過(guò)了后面兩個(gè)時(shí)間. 因此后面執行完的,可能沒(méi)能找到j(luò )query這個(gè)對象。

　　然這種方式怎么處理呢?

　　其實(shí)文件的加載是有個(gè)狀態(tài)處理的.文件的加載有個(gè)onload事件,就是可以監聽(tīng)文件是否加載完成的事件.

　　因此我們可以考慮這個(gè)方法來(lái)處理我們想要的結果.我們用直觀(guān)的方式來(lái)處理.改進(jìn)后的代碼如下：

　　function loadjs(fileurl, fn){ var sct = 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,執行完這個(gè)代碼之后,加載文件都是在前一個(gè)加載完成后,才會(huì )加載另外一個(gè),這樣就不會(huì )造成找不到用到的對象了.

　　然后我們來(lái)執行一個(gè)彈出框的效果,代碼里面使用了 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("Hello world!", function() { Example.show("Hello world callback"); }); }) }) });

　　刷新頁(yè)面,就會(huì )直接顯示彈出框：

　　動(dòng)態(tài)加載的代碼,往往容易在這里花費很多時(shí)間調試.大家最好的辦法就是寫(xiě)一個(gè)最簡(jiǎn)單的例子,理解其中的原因. 這里的代碼都可以進(jìn)行封裝,還可以加入CSS文件的加載.作為自己的插件使用。

【Javascript加載方法】相關(guān)文章：

JavaScript常用方法匯總10-25

JavaScript數組常用方法介紹09-04

javascript跨域訪(fǎng)問(wèn)的方法07-09

javascript編程異常處理的方法08-04

JavaScript fontcolor方法入門(mén)實(shí)例07-07

使用ajax操作JavaScript對象的方法09-28

詳解JavaScript中的splice()使用方法08-20

關(guān)于javascript尋找錯誤方法整理05-23

最常用的20個(gè)javascript方法函數09-10

Javascript中arguments對象的詳解和使用方法08-20