5

我开始做 jQuery 插件，所以我没有太多经验，我今天想做的事情是为我正在处理的插件创建一个自定义事件。

我有一个很好的例子来告诉你我想要做什么是引导工具提示插件，使用这个插件我可以做这样的事情：

$('.my-tooltip').tooltip('show');

强制插件执行操作，在这种情况下执行show()插件功能

对于我的具体情况，我正在使用 jQuery 验证插件在网站周围自定义验证表单，我不想做类似的事情：

$('form#whatever').validateForm('showInlineChecks');

强制插件对某些特定字段运行验证。

让我们看一下我的代码：

/*
* jQuery plugin to validate forms around segurosdigitales
* requires jquery validate plugin
* */


if( typeof Object.create !== 'function' ){
    Object.create = function( obj ) {
        function F(){};
        F.prototype = obj;
        return new F();
    }
}


(function($){
    var validator = {

        // init the plugin
        init: function(options, element){
            var self = this;

            self.options = $.extend( {}, $.fn.validateForm.options, options );

            self.elem = element;
            self.$elem = $(element);

            self.validateTheForm();
        },


        // Set default options for jQuery validate plugin
        setValidationOptions: function(){
            var self = this;

            // Default options for all forms around the app
            // These are the default options for jquery validate plugin
            var jQueryValidatePluginOptions = {
                onfocusout: function(e){
                    // Validate all elements when 'blur' event happens, except if it has a 'datepicker-open' class, I'm adding this class because datepicker causes that the input element loses focus and validation error is triggered
                    if(!$(e).hasClass('datepicker-open')){
                        this.element(e);
                    }
                },
                errorElement: 'span',
                errorClass: 'error help-block',
                errorPlacement: function(error, element){
                    if(element.is('input[type="checkbox"]')){
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },

                // Highlight occurs when element has erros
                highlight: function(element, errorClass, validClass){
                    $(element).addClass(errorClass).removeClass(validClass);

                    var control_group = $(element).closest('.control-group, .controls-row');
                    control_group.addClass(errorClass).removeClass(validClass);

                    // Remove any valid icon
                    control_group.find('i.icon-ok').remove();
                },

                // Unhighlight occurs when element is valid
                unhighlight: function(element, errorClass, validClass){

                    $(element).removeClass(errorClass).addClass(validClass);

                    // get the parent of the field
                    var control_group = $(element).closest('.control-group, .controls-row');

                    // is field empty?
                    var element_is_empty = ( $(element).val() === '' );


                    if (!element_is_empty && !control_group.find('i.icon-ok').length) {
                        var label = control_group.find('label');

                        // Prevent to add more than one icon if control group contains more than one label (ie. when we have checkboxes and radio buttons)
                        $.each(label, function () {
                            $(this).prepend('<i class="icon-ok green"></i>');
                            return false;
                        });

                        // add class only if element is valid and not empty
                        control_group.removeClass(errorClass).addClass(validClass);
                    }
                }
            };

            // add other options depending of validateForm plugin options
            if( self.options.errorMessages ){
                jQueryValidatePluginOptions.messages = self.options.errorMessages;
            }

            if( self.options.rules ){
                jQueryValidatePluginOptions.rules = self.options.rules;
            }

            if( self.options.showNotification ){
                jQueryValidatePluginOptions.invalidHandler = function(event, validator){
                    var errors = validator.numberOfInvalids();
                    if(errors){
                        generateNotification('error', false, 'Por favor corrige los errores en los campos resaltados en rojo para poder continuar.');
                    }
                }
            }

            return jQueryValidatePluginOptions;

        },


        // Validate form
        validateTheForm: function(){
            var self = this;

            var validateOpts = self.setValidationOptions();

            self.$elem.validate(validateOpts);
        }

    };

    $.fn.validateForm = function(options){
        return this.each(function(){
            var validate = Object.create(validator);
            validate.init(options, this);
        });
    };

    $.fn.validateForm.options = {
        errorMessages: null,
        rules: null,
        showNotification: true
    }

})(jQuery);

我该怎么做？

4

1 回答 1

12

使用 jquery 创建、发出和订阅自定义事件非常简单。

为了发出自定义事件，您只需调用触发器

 $(elem).trigger('myCustomEvent.myNS')

我建议始终使用命名空间，以便更轻松地管理自定义事件

然后您像订阅常规活动一样订阅您的活动

 $(elem).on('myCustomEvent.myNS', function(event) {

 })

您还可以添加传递给事件处理程序的其他参数，就像这样

 $(elem).trigger('myCustomEvent.myNS', ['p1', 'p2'])

 $(elem).on('myCustomEvent.myNS', function(event, param1, param2) {
     console.log(param1) // outputs p1
     console.log(param2) // outputs p2
 })

所以总的来说，在一些用户操作上，比如点击一个按钮，你会发出你的自定义事件，就像这样

$(elem).on('click', 'button.save', function (e) {
     $(elem).trigger('validate.myCtrl', [e, this])
})

另请注意，如果您的事件与您正在定义事件的对象上的某些方法具有相同的名称，jquery 将在调用时尝试调用此方法trigger。为了避免这种行为，请使用triggerHandlerjquery 方法。

更新：@cristiangrojas，我建议您在此处检查设置 jquery 插件的不同“标准”方法https://github.com/shichuan/javascript-patterns/tree/master/jquery-plugin-patterns '

于 2013-05-21T14:45:31.253 回答