如何管理JavaScript中的依賴關係？

我有腳本需要等待某些條件才能運行 - 例如等待另一個腳本加載，或等待創建一個數據對象。如何管理JavaScript中的依賴關係？

我該如何管理這種依賴關係？我能想到的唯一方法是使用setTimeout在很短的時間間隔內循環並檢查函數或對象的存在。有沒有更好的辦法？

如果setTimeout是唯一的選擇，那麼輪詢我的頁面的合理時間間隔是多少？ 50毫秒，100毫秒？

[編輯]我的一些腳本從網頁本身或Web服務收集數據，有時是從多個來源的組合中收集數據。數據可以隨時準備好，無論是在頁面加載之前還是之後。其他腳本呈現數據（例如構建圖表）。

[更新]感謝您的有用答案。我同意我不應該重蹈覆轍，但是如果我使用圖書館，至少我想了解背後的邏輯（是否只是幻想的超時？）來嘗試和預測我的頁面上的性能影響。

來源

2012-01-26 Christophe

查看[LAB.js]（http://labjs.com）或其他類似的腳本加載器。 – Pointy

setTimeout不是你最好的選擇，你能提供更多的細節嗎？爲什麼你不能午餐腳本加載腳本？ – Khodor

該腳本需要滿足幾個條件：要存在的數據和要加載的函數。它不依賴於另一個腳本。 – Christophe

我已經使用了pxLoader，這是一款JavaScript Preloader，效果很好。它默認使用100ms輪詢。

我不打擾在這裏重新發明輪子，除非你需要一些東西真的自定義，所以給（或任何JavaScript預加載器庫真的）一看。

來源

2012-01-26 15:47:52

您可以在正在加載的腳本結尾處調用類似loaded(xyz);的函數。該函數將在其他地方定義，並設置爲基於xyz的值調用已註冊的回調。 xyz可以是任何東西，一個簡單的字符串來標識腳本，或一個複雜的對象或功能或任何。

或者只是使用jQuery.getScript(url [, success(data, textStatus)])。

來源

2012-01-26 15:52:09 Supr

對於彼此依賴的腳本，請使用像RequireJS這樣的模塊系統。

要遠程加載數據，請使用回調，例如，

$.get("/some/data", "json").then(function (data) { 
    // now i've got my data; no polling needed. 
});

下面是這兩個組合的例子：

// renderer.js 
define(function (require, exports, module) { 
    exports.render = function (data, element) { 
     // obviously more sophisticated in the real world. 
     element.innerText = JSON.stringify(data); 
    }; 
}); 

// main.js 
define(function (require, exports, module) { 
    var renderer = require("./renderer"); 

    $(function() { 
     var elToRenderInto = document.getElementById("#render-here"); 

     $("#fetch-and-render-button").on("click", function() { 
      $.get("/some/data", "json").then(function (data) { 
       renderer.render(data, elToRenderTo); 
      }); 
     }); 
    }); 
});

來源

2012-01-26 15:57:41 Domenic

謝謝，這是有道理的。在我的情況下，問題是我控制了使用函數和數據的腳本，而不是加載它們的腳本。這就是我在編輯中試圖解釋的內容。 – Christophe

哦，如果你沒有控制權，那麼你就搞砸了，我猜想民意調查是唯一的選擇。也許這些腳本給你一些鉤子？例如。發射你可以訂閱的自定義事件。 – Domenic

我實際上發佈了一個關於腳本onload的問題http://stackoverflow.com/questions/8956414/cross-browser-onload-event-in-a-static-script-tag。關於jQuery的信息+1 thx推遲/然後。 – Christophe

有對這種事情很多框架。

我使用骨幹此刻http://documentcloud.github.com/backbone/

朋友們還建議knockout.js http://knockoutjs.com/

這兩種使用MVC模式來更新視圖一旦數據已經被加載模型

[更新]我認爲，在他們最基本的層面上，這些庫使用回調函數和事件偵聽器來更新頁面的各個部分。

例如

model1.loadData = function(){ 
    $.get('http://example.com/model1', function(response){ 
     this.save(response); 
     this.emit('change'); 
    }); 
} 

model1.bind('change',view1.update); 
model1.bind('change',view2.update);

來源

2012-01-26 16:06:15 Qazzian

謝謝！這看起來像我在找什麼。你認爲這樣的框架還可以監控何時加載腳本，還是需要將它們與其他回覆中提到的庫結合起來？ – Christophe

如何管理JavaScript中的依賴關係？

回答

相關問題