如何管理 JavaScript 中的依赖关系？

发布于 2024-12-29 01:38:15 字数 372 浏览 1 评论 0原文

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

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

归属感 2025-01-05 01:38:15

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

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

回复收藏 0 原文

夜访吸血鬼 2025-01-05 01:38:15

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

For scripts that have dependencies on each other, use a module system like RequireJS.

For loading data remotely, use a callback, e.g.

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

Here's an example of these two in combination:

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

回复收藏 0 原文

我不吻晚风 2025-01-05 01:38:15

对于这种事情有很多框架。

我现在正在使用 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);

There are many frameworks for this kind of thing.

I'm using Backbone at the moment http://documentcloud.github.com/backbone/

Friends have also recommended knockout.js http://knockoutjs.com/

Both of these use an MVC pattern to update views once data has been loaded by a model

[update] I think at their most basic level these libraries are using callback functions and event listeners to update the various parts of the page.

e.g.

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

回复收藏 0 原文