JavaScript重構(二):JS的動態加載

前一節留下瞭一個問題,如果JS分門別類也清晰瞭,那我現在需要在必要的情況下才加載某一模塊的JS,這個怎麼實現呢?
 
方法一,最簡單也是最容易被接受的方法,通過後臺代碼來控制,還是少些復雜的JS吧,通過一個標簽、一個分支判斷,就可以做到,何樂而不為呢?
 
方法二,如果要使用純JS來控制,那麼看看這樣如何:
Js代碼 
$.ajax(){  
  url:"xxx/play.js";  
  ……  
  success:function(res){  
    eval(res.responseText);  
  }  

 
原理是很簡單,不過有一個藏匿著的魔鬼:eval,js加載的生效就靠它瞭,那麼執行的上下文就在它的裡面,這就會帶來一些潛在的問題,而且,調試也變得困難。
 
方法三,通過添加<script>標簽的方式來動態引入腳本:
原理相信大傢也馬上能領悟個大概瞭,需要的時候動態地往頁面的<head>裡面寫一對<script>標簽,讓瀏覽器自己去取需要的js,這樣的就解決瞭方法二裡面的魔鬼eval的問題,是一個比較好的方法:
Js代碼 
<script src="xxx/play.js" … /> 
 
這裡囉嗦一句,<script>標簽中的src——本質上不就是對src所表示的地址發送一個get請求嗎?這雖然看起來有點歪門邪道,卻恰恰是一個跨域問題的解決辦法!因為瀏覽器對<script>引用js頁面可沒有同域的安全限制(以前轉載過過一篇跨域問題的討論,見此)。
 
方法四,很多JS框架都提供瞭易於使用的JS動態加載的方法,比如JQuery的loadScript方法,這裡不討論瞭。
 
另外,如果使用上pushlet的方法,對一個js文件無止境地讀取,能否實現這樣的效果呢?僅作設想,希望有人與我討論。

作者“四火的BLOG”

You May Also Like