对自定义事件作出反应的更好方式

A better way to react to custom events

本文关键字：更好 方式 自定义 事件      更新时间：2023-09-26

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

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

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

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

这是有效的。

然而，它感觉像是被黑客攻击在一起，我不确定我是以标准的还是可接受的方式来做这件事。Javascript或JQuery中有什么东西可以让我更好地运行这种逻辑吗？

是的，使用triggerHandler方法可以很容易地做到这一点：

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

要取消，用户所要做的就是返回false。

样品：http://jsfiddle.net/7B2Kw/1/

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

$(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

相关文章：