如何動态加載js？

第三方的js檔案，自己寫的js檔案，js越來越多了怎麼辦？

提出問題：

1、js檔案太多了，每個頁面都寫<script src="...">太麻煩。

2、如果路徑變化了，或者js名稱變化了怎麼辦？每個頁面都改一遍嗎？

3、如何限制js檔案的加載順序？a.js定義了一個函數，b.js要調用，但是b.js先加載了，a.js還沒加載完成，造成函數未定義，無法調用。

4、js檔案的合并。開發階段，js會分成多個檔案，這樣便于開發。但是成熟了之後會合并成一個檔案。這樣引用方式就會變化，原先引用一堆js，現在隻需要引用一個js。同樣不能每個頁面都改一遍。

5、加載js完畢之後，要可以執行回調函數。 

解決問題：

如何解決這些問題呢？我想到的辦法是——動态加載js。就是通過js代碼的方式來加載。

其中這段代碼挺符合我的需求。

一開始把代碼copy過來使用，在ie8和chrome裡面都沒有問題。既然沒有問題那就用呗，雖然還不知道為啥要這麼寫代碼。

遇到新問題：

但是沒過多久就遇到了問題，在IE10裡面，樹、分頁、表格等，都會多出來好幾份？

把IE10設定為相容IE7的模式，就一切正常。看了是IE10的新特性照成的。那麼到底是怎麼回事呢？斷點跟蹤吧。

弄了好久才發現，原來是js檔案會被加載多次。

為什麼被加載了多次呢？原因在于 onreadystatechange 和 onload 。為什麼這兩個事件都調用了callback？為什麼其他浏覽器沒事，IE10有事呢？

根據斷點跟蹤得到了原因。

原來 chrome隻會觸發 onload， 而不會觸發onreadystatechange（不會進入斷點）。

而IE7隻會觸發 onreadystatechange，而不會觸發onload。

那麼IE10呢？兩個都會被觸發。

繼續解決：

一開始是想做一個标志位。做一個标志，如果callback了就不再次callback。但是實際效果有點不穩定，當然很可能是俺代碼沒處理好。

于是還是換一種方法吧。老辦法，判斷浏覽器類型。

如果是IE10，那麼隻設定onload。然後，世界安靜了。當然這裡浏覽器的類型判斷還不完全。浏覽器太多了，遇到不相容的在考慮吧，俺js其實很爛的。

小結：

看最後的代碼，是沒啥特别的，重點在于了解原有代碼，發現問題，解決問題的過程。

下一步是如何管理js。還有js的用戶端緩存、複用的問題。