Question

我正在构建一个自包含的jquery ui组件，我想让任何人使用该组件进行大量控制。例如，表单是我的组件的一个重要部分，我的组件有一些内置的表单验证，但我给了用户禁用内置验证的选项。我希望他们能够在此基础上进行自己的表单验证。

因此，当单击表单提交按钮时，我会触发一个自定义事件并检查一个布尔值。

this.element.trigger('customEvent');
if(canContinue) { ...

默认情况下布尔值为true，但我的想法是用户可以监听我的customEvent然后进行验证，如果验证失败，则将布尔值切换为false，这样表单就不会提交。

这很有效。

然而，它感觉被黑了，我不确定我是以标准还是可接受的方式做到这一点。 Javascript或JQuery中是否有可能更好地用来运行这种逻辑？

Answer 1

是的，使用triggerHandler方法可以轻松实现：

var handlerResult = this.element.triggerHandler("customEvent");
if (handlerResult || typeof handlerResult == "undefined") {
    alert("Success!");                           
}

取消的所有用户都要返回false。

示例：http://jsfiddle.net/7B2Kw/1/

Answer 2

您可以实施Strategy设计模式，将验证实施为默认策略，并让用户实施自定义策略。用户可以使用其他验证策略配置组件（例如，将其作为配置属性之一传递，或者在实例化后设置组件的相关属性）。您可以在下面找到一个示例：

$(function() {
    $.widget( "custom.mycomponent", {
        options: {
            validate: null
        },
        _validate: function() {
            return true;
        },
        _create: function() {
            this.options.validate = this.options.validate || this._validate;
            var that = this;
            this.element.on('keypress', function() {
                if(that.option('validate')()) {
                    this.style.backgroundColor = 'green';
                } else {                                        
                    this.style.backgroundColor = 'red';
                }
            });
        },
        _setOptions: function() {
            this._superApply( arguments );
        },
        _setOption: function(key, value) {
            switch(key) {
                case 'validate': 
                    if(typeof value !== 'function') return;
            }
            this._super( key, value );
        }
    });

    // Instantiate with default options
    $('#my-component1').mycomponent();

    // Pass another validation strategy
    $('#my-component2').mycomponent({validate: function() {return false;}});

});

行动中的工作示例http://jsbin.com/inavur/4/edit

对自定义事件做出反应的更好方法

2 个答案: