在 dom 准备好之前加载要运行的模块答案

【问题标题】：Load a module to run before dom ready在 dom 准备好之前加载要运行的模块
【发布时间】：2015-10-22 03:03:53
【问题描述】：

我不知道如何使用带有自定义验证规则的require.js 加载jQuery、jQueryValidate 和jQueryValidateUnobtrusive，以使模块在dom 准备好之前运行。自定义规则被编写为模块（例如someCustomValidator.js）。 jQueryValidateUnobtrusive 的工作方式是 someCustomValidator 应该在 jQuery、jQueryValidate 和 jQueryValidateUnobtrusive 已加载但在 $.ready 被触发之前运行。第一个条件很简单，模块someCustomValidator 依赖于jQuery、jQueryValidate 和jQueryValidateUnobtrusive。这是我坚持的第二部分。 app.js 在结束正文标记之前加载，因此在大多数情况下，当 someCustomValidator 加载并运行时，domReady 已经触发。如何设置依赖项以满足someCustomValidator should be run after jQuery, jQueryValidate and jQueryValidateUnobtrusive have been loaded but before $.ready is fired 的要求。我考虑过使用holdReady，但我不确定何时调用它以及在哪个模块中调用它。

validatorSetup.js 和 someCustomValidator.js 的实际定义不是很重要，但为了完整起见，我在下面包含了基本设置。

HTML

...
...
<script src="SomePath/RequireJS/require.js"></script>
<script>
require(["app"]);
</script>
</body>
</html>

app.js

require([
        "jquery",
        "someCustomValidator",
        "anotherCustomValidator"
], function ($,
            someCustomValidator,
            anotherCustomValidator) {

    // Validators should be configured before dom ready.
    someCustomValidator.init();
    anotherCustomValidator.init();

    $(function () {
        // Stuff that should run after dom ready
        someModule1.init();
        someModule2.init();
    });
});

validatorSetup.js

define("validatorSetup", ["jquery", "jquery-validate", "jquery-validate-unobtrusive"], (function ($) {
    var validatorSetup = {
        init: function() {
            this.setDefaults();
        },

        setDefaults:function() {
            this.setIgnore();
        },

        setIgnore: function() {
            $.validator.setDefaults({
                ignore: ":hidden, .ignore"
            });
        }
    };

    return validatorSetup;
}));

someCustomValidator.js

define("someCustomValidator", ["validatorSetup", "jquery", "jquery-validate", "jquery-validate-unobtrusive"], (function (validatorSetup, $) {
    var someCustomValidator = {
        init: function () {
            validatorSetup.setIgnore();

            this.setUpValidationRule();
        },

        setUpValidationRule: function () {
            $.validator.unobtrusive.adapters.add(
                "somerule",
                ["someprop", "rule", "ruleparam"],
                function (options) {
                    options.rules["somerule"] = options.params;
                    options.messages["propertydependencyrule"] = options.message;
                }
            );

            $.validator.addMethod(
                "somerule",
                function (value, element, params) {
                    var rule = params.rule;
                    var ruleParams = params.ruleparam;

                    //Some logic

                    return $.validator.methods[rule].call(this, value, element, ruleParams);
                },
                ""
            );
        }
    };

    return someCustomValidator;
}));

【问题讨论】：

一个问题是require() 是异步的并且不会阻塞，因此页面可能会在require() 完成之前完成加载。页面中的<script> 标记处于阻塞状态，因此如果您可以使用它来加载您需要先加载的内容，那么这些内容将在 DOM 准备好之前加载。
是的，我明白了。我确保没有不是通过 require 加载的脚本。即使我愿意为这三个脚本例外，它也会带来挑战，因为每个自定义验证器模块都必须以这种方式加载。 jQuery 也必须作为模块加载，因为还有其他模块依赖于它。是否可以通过脚本标签和模块加载脚本？
你的标题是问如何在 DOM 准备好之前加载脚本。如果您使用require() 动态加载脚本，则不能保证它会在 DOM 之前加载。你就是不能。但是，我怀疑这并不是您要解决的实际问题。可能您想确保在加载脚本之后和其他代码运行之前运行其他一些代码。如果您能以更清晰的方式表达实际问题，我们可能会帮助您解决实际问题。我知道你试图解释这一点，但我不理解。请澄清。
jQueryValidateUnobtrusive 库将服务器端验证逻辑适配到 jQueryValidate 库。它在内部使用 dom ready 来做到这一点。如果我们想使用必须在 dom 准备好之前完成的自定义验证逻辑。如果这些脚本中的每一个都在使用脚本标记的页面中，但由于 requirejs 的异步加载而无法正常工作，这一切都可以正常工作。我确实有解决方法，但效率不高，所以我想看看是否有更好的方法。
为什么不添加一个小模块，在 jQuery 之后加载并争论 ready 函数。 $.readyNow = $ready; $.ready = function(stuff){ //do your stuff; $.readyNow(stuff); // your done so let jquery do its thing 之类的东西，没有理由不能用自己的函数替换 jquery 函数。

标签： jquery asp.net-mvc-4 requirejs jquery-validate unobtrusive-validation

【解决方案1】：

我以这种方式重新组织了依赖关系，dom ready 是 head，直到稍后在加载 someCustomValidator.js 后释放它。

app.js

require(["jquery"], function($) {
    // Hold the domready
    $.holdReady(true);

    require([
            "jquery",
            "someCustomValidator",
            "anotherCustomValidator"
    ], function ($,
                someCustomValidator,
                anotherCustomValidator) {

        // Validators should be configured before dom ready.
        someCustomValidator.init();
        anotherCustomValidator.init();

        // The custom validations have been attached.
        // Now it is ok to let the dom ready to fire
        $.holdReady(false);

        $(function () {
            // Stuff that should run after dom ready
            someModule1.init();
            someModule2.init();
        });
    });
});

【讨论】：