如何在 JavaScript 中管理依赖项？答案

【问题标题】：How to manage dependencies in JavaScript?如何在 JavaScript 中管理依赖项？
【发布时间】：2012-02-19 16:44:41
【问题描述】：

我的脚本需要等待满足某些条件才能运行 - 例如等待加载另一个脚本，或等待创建数据对象。

如何管理此类依赖项？我能想到的唯一方法是使用 setTimeout 以短间隔循环并检查函数或对象的存在。有没有更好的办法？

如果 setTimeout 是唯一的选择，那么轮询我的页面的合理时间间隔是多少？ 50 毫秒，100 毫秒？

[编辑] 我的一些脚本从页面本身或 Web 服务收集数据，有时来自多个来源的组合。数据可以随时准备好，无论是在页面加载之前还是之后。其他脚本呈现数据（例如构建图表）。

[更新] 感谢您提供有用的答案。我同意我不应该重新发明轮子，但是如果我使用库，至少我想了解背后的逻辑（这只是一个花哨的超时吗？）来尝试预测对我的页面的性能影响。

【问题讨论】：

查看LAB.js 或其他类似的脚本加载器。
setTimeout 不是您的最佳选择，您能提供更多详细信息吗？为什么你不能为正在加载的脚本午餐你的脚本？
脚本需要满足几个条件：既要存在数据，又要加载函数。它不仅仅依赖于另一个脚本。

标签： javascript dependencies lazy-loading settimeout

【解决方案1】：

这类事情有很多框架。

我目前正在使用 Backbone http://documentcloud.github.com/backbone/

朋友也推荐了knockout.js http://knockoutjs.com/

一旦模型加载了数据，这两者都使用 MVC 模式来更新视图

[update] 我认为这些库在最基本的层面上使用回调函数和事件侦听器来更新页面的各个部分。

例如

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);

【讨论】：

谢谢！这看起来像我正在寻找的东西。您认为此类框架是否还可以监控脚本何时加载，或者我是否需要将它们与其他回复中提到的库结合起来？

【解决方案2】：

对于相互依赖的脚本，使用像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);
            });
        });
    });
});

【讨论】：

谢谢，这是有道理的。我的问题是我可以控制使用函数和数据的脚本，而不是加载它们的脚本。这就是我在编辑中试图解释的内容。
哦，如果你没有控制权，那你就完蛋了，我想轮询是唯一能想到的选择。也许这些脚本为您提供了某种钩子？例如。触发您可以订阅的自定义事件。
我实际上在这里stackoverflow.com/questions/8956414/… 发布了一个关于脚本加载的问题。 +1 感谢有关 jQuery deferred/then 的信息。

【解决方案3】：

您可以在正在加载的脚本的末尾调用loaded(xyz); 之类的函数。该函数将在别处定义并设置为根据xyz 的值调用已注册的回调。 xyz可以是任何东西，可以是一个简单的字符串来标识脚本，也可以是一个复杂的对象或函数等等。

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

【讨论】：

【解决方案4】：

我使用了pxLoader，这是一个 JavaScript 预加载器，效果很好。它默认使用 100ms 轮询。

除非您需要真正自定义的东西，否则我不会费心在这里重新发明轮子，所以看看那个（或任何 JavaScript 预加载器库）。

【讨论】：