2012-12-10 48 views
1

我正在開發基於窗口小部件/小工具的網站,因爲用戶可以在屏幕上選擇他想要的窗口小部件/小工具。在需要時加載JavaScript文件

這意味着我將有數百/數千個js文件,每個小工具/小工具1個。我認爲我可以使用$ .getScript根據用戶選擇在需要時加載正確的js文件。

我發現的問題是$ .getScript只能通過javascript全局變量發送變量。全局變量和$ .getScript似乎並不能很好地一起玩。

是否有另一種方法呢?即以某種方式僅在需要時根據用戶選擇加載js文件,其中加載的js文件可以從調用子js文件的js文件接收變量?

+5

http://requirejs.org/ – Shmiddty

+1

而不是給了JS文件變量,對JS文件來調用腳本執行,你可以在完成調用方法getScript以所述變量作爲參數。 –

+0

我正在研究一個類似的體系結構 - 一個由大量小應用程序組成的Web應用程序,用戶可根據需要加載這些應用程序。AMD模塊和RequireJS(正如@Shmiddty所評論的)非常適合這一點。 – JcFx

回答

3

此問題的解決方案是使用像require.js這樣的模塊加載器系統。

它會根據每個名爲dependencies的文件自動知道要加載哪些文件。

你的模塊將清晰地勾勒他們的depenedncies這樣的:

require(["helper/util"], function(util) { 
    //This function is called when scripts/helper/util.js is loaded. 
    //If util.js calls define(), then this function is not fired until 
    //util's dependencies have loaded, and the util argument will hold 
    //the module value for "helper/util". 
}); 

一旦他們已經做了require.js加載器會自動加載正確的JS文件給你。這是一種不同的語法,但它會解決問題。

3

我發現的問題是$ .getScript只能通過javascript全局變量發送變量。全局變量和$ .getScript似乎並不能很好地一起玩。

通過$.getScript加載的腳本可以很好地訪問全局變量。 (不是說全局變量是個好主意。)

但是,將信息傳遞到加載的腳本的另一種方法是針對每個腳本實施基於腳本名稱的加載後回調以及要調用的加載程序代碼該回調(帶有你想傳遞給它的參數)一旦$.getScript做它的事情。

Live Example | Source

當然,這個例子使用全局變量太多  — $爲jQuery和新的腳本的theNewScript加載完成的功能是一個全球性的。在生產系統中,爲了完成此操作,我只需要在整個應用程序(例如,MyApp)中全局使用一個,在範圍函數中定義所有代碼以避免創建任何其他全局變量,腳本將其「加載完成」功能設置爲屬性。 (通常我根本不定義任何全局變量,因爲我通常不需要加載腳本。)

0

嘗試使用純JavaScript

 var html_doc = document.getElementsByTagName('head')[0]; 
     js = document.createElement('script'); 
     js.setAttribute('type', 'text/javascript'); 
     js.setAttribute('src', '../scripts/jquery-1.7.2.min.js'); 
     html_doc.appendChild(js); 
     js.onreadystatechange = function() { 
      if (js.readyState == 'loaded' || js.readyState == 'complete') { 
       doSomething 
      } 
     } 

     //works on ff e no chrome 
     js.onload = function() { doSomething }