2012-10-24 57 views
2

使用JQuery.load(),我改變我的網站的主窗口的內容,以允許用戶在標籤之間切換。對於每個選項卡,都有一個或多個scipt,其中包含加載選項卡內容後執行的函數。如果函數已經存在,請阻止重新加載javascript。否則,確保同步加載

顯然切換到選項卡,第一次的時候,腳本必須從服務器獲取和解釋,但如果用戶切換回選項卡以後這不應該發生。所以,把它簡稱:

  1. 負荷()HTML

  2. 確保JavaScript函數存在,否則負載腳本和解釋。

  3. 呼叫一對DOM之後的JavaScript的功能重建。

在執行步驟3之前,第一步和第二步必須完成。

目前,我使用嵌套的回調來實現這一點:

function openFirstTab(){ 
    $("#mainWindow").load("firstTab.php", function(){ 
     if(typeof(onloadfFirstTab) != "function"){ 
      jQuery.getScript("assets/js/FirstTab.js", function(){ 
       onloadFirstTab(); 
      }); 
     } 
     else{ 
      onloadFirstTab(); 
     } 

    }); 

} 

但我覺得應該有一個更好的辦法。

回答

2

您不能完全同步地編寫代碼,因爲在頁面加載後無法同步加載腳本(除非您執行同步XHR請求並評估結果 - 不推薦)

你有幾個選擇,有像RequireJS這樣的預先存在的依賴管理庫,可能適合這裏的賬單,或者如果你只需要加載一個文件就可以做一些事情這樣的清理你的代碼位,而不是使用的if/else:

function loadDependencies() { 
    // For the sake of example, the script adds "superplugin" to the jQuery prototype 
    return $.getScript("http://mysite.com/jquery.superplugin.js"); 
} 

function action() { 
    // If superplugin hasn't been loaded yet, then load it 
    $.when(jQuery.fn.superplugin || loadDependencies()).done(function() { 
     // Your dependencies are loaded now 
    }); 
} 

這使得使用jQuery的使代碼更好。

0

如果你不希望加載JS超過一次,你要動態加載它,後來才知道的唯一途徑無論是已經加載是測試一些條件,即表明它已經加載。我知道的選擇是:

  1. 我所知道的是你已經做的最簡單的(檢查函數的存在是在JavaScript中定義)。

  2. 你也使用每個選項卡上的屬性(使用jQuery的.data()您在加載腳本後設置爲true

  3. ,以便它知道如何避免重新您可以編寫動態加載代碼初始化本身,如果它已經被加載。在這種情況下,你只需每次加載它,但連續的時間沒有做任何事情。提示,你不能有任何靜態定義的全局變量,你必須測試,如果它已經被在它運行它自己的初始化代碼之前加載。

+0

如果您閱讀我發佈的代碼,您將會看到我已經檢查過所需函數是否存在:'typeof(onloadfFirstTab)!=「function」'。這不是我的問題。在我尚未加載一個(或多個)腳本的情況下,我正忙於同步。至於號碼3,我想防止重新加載,不僅是重新初始化。如果這是有道理的。 –

+0

@Konstantin - 你不清楚你在問什麼。我看到你發佈的內容,並認爲你在說這個代碼可行,你只是問是否有比這更乾淨的東西。我總結了可用的選項。如果您擔心同步,那麼您可以使用選項2並在啓動負載時設置標誌,這樣您就不必擔心在第一個負載啓動之後開始第二個負載,但尚未完成。 – jfriend00

+0

對不起,我沒有明確表達自己,很難問一個確切的問題。關於你的建議:即使我選擇了第二種選擇,我可能會遇到這樣的問題,即在加載多個腳本之前,需要等待函數調用。 –

0

(沒有測試它,所以我不知道它是否工作,特別是因爲我還不真正瞭解JavaScript的範圍:)

function require(scripts, callback){ 
var loadCount = 0; 

function done(){ 
loadCount -=1; 
if (loadCount==0){ 
    callback(); 
    } 
} 

for (var script in scripts){ 
    if (!script.exitsts()){ 
     loadCount +=1; 
     jQuery.getScript(script.url, done); 
     } 
} 

} 

這個函數腳本的陣列要求和確保它調用callback()之前,所有的人都理解。

的「腳本」類:

function script(url, testFunc){ 
this.url =url; 
this.testFunction = testFunc; 
this.exists = function(){ 
if(typeof(testFunction)=="function"){ 
    return true; 
    } 
else{ 
    return false; 
    } 
} 
} 

當測試功能是定義(只)在相關腳本的功能。

PS: 要在JQuery中啓用緩存,從而防止瀏覽器在每次調用getScript()時都執行GET請求,可以使用presented here之一的方法。

儘管避免了不必要的GET請求,但每次調用getScript()時仍會解釋腳本。這有時可能是期望的行爲。但在很多情況下,不需要重新解讀圖書館的功能。在這些情況下,如果所需的庫函數已經可用,避免調用getScript()是有意義的。 (因爲在這個例子中使用script.exists()。

相關問題