Совет по плагину jQuery

Question

В настоящее время я пишу свой первый плагин jQuery, и я изо всех сил пытаюсь найти подходящий способ структурировать код.Я прочитал документацию на веб-сайте jquery, а также исходный код других плагинов, но, похоже, не могу найти согласованный способ сделать это или тот, который решает проблему, с которой я столкнулся.добавляет некоторую обработку текста к элементу ввода текста для форматирования текста как даты.

Пример ниже связывает два события с элементом.У меня есть проблема, как я могу получить доступ к самому элементу из функции _processText.В примере я использую $ (this), но это дает мне объект, а не элемент, поэтому я не могу установить для него значение или вызвать событие.Единственный способ сделать это - передать элемент в функцию как параметр непосредственно в событии связывания, но я не думаю, что это выглядит правильно.

Любая помощь, полученная в значительной степени.

(function($) {


    var methods = {
        init : function( options ) {
            return this.each(function() {


                // Process the entered text and convert
                // into a formatted date
                $(this).bind('blur', function(event){
                    methods._processText($(this).val());
                });


                // Custom event to trigger when invalid text
                // is entered
                $(this).bind('invalid', function(event) {
                    alert("Invalid");
                });


            });
        },

        _processText: function(txt) {

            // Sudo code
            if (txt.isValid()) {
                $(this).val(txt)
            } else {
                $(this).trigger("invalid");
            }

        }

    };






    // boilerplate
    $.fn.datefield = function( method ) {
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.DateField' );
        }
    };
})(jQuery);

Answer 1

Могу ли я предложить использовать jQuery Boilerplate?Это довольно прочная основа для разработки большинства плагинов, особенно если вы не знакомы с трудностями в области видимости.

// the semi-colon before function invocation is a safety net against concatenated 
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global variable in ECMAScript 3 is
    // mutable (ie. it can be changed by someone else). undefined isn't really being
    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
    // can no longer be modified.

    // window and document are passed through as local variables rather than globals
    // as this (slightly) quickens the resolution process and can be more efficiently
    // minified (especially when both are regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method which merges the contents of two or 
        // more objects, storing the result in the first object. The first object
        // is generally empty as we don't want to alter the default options for
        // future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and the options via the instance, 
        // e.g., this.element and this.options
    };

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

http://jqueryboilerplate.com/

Answer 2

Используйте это:

methods._processText.call(this, $(this).val());

Тогда внутри метода _processText, this будет указывать на объект jQuery.

Ссылка: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call