在 dom 准备好之前将模块加载到运行

Question

我不知道如何使用 require.js 和自定义验证规则加载 jQuery、jQueryValidate 和 jQueryValidateUnobtrusive，使模块运行秒前 dom 就绪。自定义规则被编写为模块（例如 someCustomValidator.js）。 jQueryValidateUnobtrusive 的工作方式是 someCustomValidator 应该是运行在 jQuery、jQueryValidate 和 jQueryValidateUnobtrusive 加载之后但在 [=26= 之前] 被解雇。第一个条件很简单，模块 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;
}));

Answer 1

我以这种方式重新组织了依赖项，dom 准备就绪，直到稍后在 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();
        });
    });
});

在 dom 准备好之前将模块加载到运行

Load a module to run before dom ready

jquery

jquery-validate

requirejs

unobtrusive-validation

asp.net-mvc-4

在 dom 准备好之前将模块加载到 运行

Load a module to run before dom ready

jquery

jquery-validate

requirejs

unobtrusive-validation

asp.net-mvc-4

在 dom 准备好之前将模块加载到运行