Как управлять зависимостями в JavaScript?

Question

У меня есть сценарии, которым необходимо дождаться выполнения определенных условий, прежде чем они будут запущены - например, ждать загрузки другого сценария или ждать создания объекта данных.

Как мне управлятьтакие зависимости?Единственный способ, о котором я могу подумать, - это использовать setTimeout для зацикливания через короткие промежутки времени и проверки существования функций или объектов.Есть ли лучший способ?

И если setTimeout является единственным выбором, какой разумный интервал времени для опроса моей страницы?50 мс, 100 мс?

[Редактировать] некоторые из моих сценариев собирают данные либо с самой страницы, либо с веб-служб, иногда из комбинации нескольких источников.Данные могут быть готовы в любое время, до или после загрузки страницы.Другие сценарии отображают данные (например, для построения диаграмм).

[обновление], спасибо за полезные ответы.Я согласен с тем, что мне не следует изобретать велосипед, но если я использую библиотеку, по крайней мере, я бы хотел понять логику (это просто фантастический тайм-аут?), Чтобы попытаться предвидеть влияние на производительность моей страницы.1009 *

Answer 1

Существует множество рамок для такого рода вещей.

Я сейчас использую Backbone 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);

Answer 2

У вас может быть вызов функции, такой как loaded(xyz); в конце загружаемых скриптов.Эта функция будет определена в другом месте и настроена для вызова зарегистрированных обратных вызовов на основе значения xyz.xyz может быть чем угодно, простой строкой, идентифицирующей скрипт, или сложным объектом или функцией или чем-то еще.

---

Или просто используйте jQuery.getScript(url [, success(data, textStatus)] ).

Answer 3

Для сценариев, которые зависят друг от друга, используйте систему модулей, такую ​​как 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);
            });
        });
    });
});

Answer 4

Я использовал pxLoader , предварительный загрузчик JavaScript, который работает довольно хорошо.По умолчанию он использует опрос 100 мс.

Я бы не стал изобретать колесо здесь, если вам не нужно что-то действительно нестандартное, так что взгляните на это (или на любую библиотеку предзагрузчика JavaScript).