Question

在jQuery和MooTools中完全加载页面和其他一些基本模块后，是否有任何内置解决方案可以推迟加载某些模块？

或者有没有办法在需要时加载想要的模块？例如，通过单击按钮，我的意思是要求通过脚本本身加载模块。

我必须选择其中一个框架，延迟加载是我的重要优先事项之一。

Answer 1

对于mootools，你可以使用mootools-more中的Asset.javascript。

例如

if (somelogic) {
    new Asset.javascript("somefile.js", {
        onload: function() {
            // call something defined / dependent on somefile.js being there.
        }

    });
}

Asset.js还可以支持延迟加载css，图像或图像，并且可以轻松地重写以使用需要按顺序引入的多个js文件。

Asset.javascripts = function(sources, options) {
    // load an array of js dependencies and fire events as it walks through
    options = Object.merge({
        onComplete: Function.from,
        onProgress: Function.from
    }, options);
    var counter = 0, todo = sources.length;

    var loadNext = function() {
        if (sources[0])
            source = sources[0];

        Asset.javascript(source, {
            onload: function() {
                counter++;
                options.onProgress.call(this, counter, source);
                sources.erase(source);

                if (counter == todo)
                    options.onComplete.call(this, counter);
                else
                    loadNext();
            }
        });
    };

    loadNext();
};

然后我就这样使用（例如，如果没有加载日期选择器，则引入日期选择器）：

if (!window.Picker) {
    new Asset.javascripts([
        "/js/mylibs/Locale.en-US.DatePicker.js",
        "/js/mylibs/Picker.js",
        "/js/mylibs/Picker.Attach.js",
        "/js/mylibs/Picker.Date.js"
    ], {
        onComplete: function() {
            new Asset.css("/js/mylibs/datepicker.css");
            new Asset.css("/js/mylibs/datepicker_dashboard/datepicker_dashboard.css");

            doDates();
        }
    });
}
else {
    doDates();
}

Answer 2

您可以使用getScript在jQuery中执行此操作。请参阅此答案：JQuery to load Javascript file dynamically

Answer 3

为什么不异步加载资产？这有各种脚本库。我现在使用的是head.js。您可以设置许多依赖项并指示加载哪些模块以及何时加载。

我倾向于在加载其所需的插件之前测试是否存在特定的DOM元素 - 这往往会限制脚本被不必要地加载，即当页面上没有实际的图库时，图库脚本会占用带宽。

有没有办法推迟在jQuery和MooTools中加载一些模块？

3 个答案: