Вызов метода jQuery во время объявления, а затем onEvent

Question

Я пишу JS (в основном jQuery) уже несколько месяцев, но сегодня я решил сделать свою первую абстракцию как метод jQuery.У меня уже есть рабочий код, но я чувствую / знаю, что я делаю это неправильно, поэтому я прихожу сюда для некоторого просветления.

Примечание: Пожалуйста, не отвечайте, что уже есть что-то, что делаеттрюк, как я уже знаю это.Мой интерес в этом вопросе довольно образовательный.

Что мой код предназначен для выполнения (и делает):

Ограничение символов текстового поля и изменение цвета счетчика, когда пользовательПриближается к концу.

И вот что у меня есть:

$(function(){

  $('#bio textarea').keyup(function(){
    $(this).char_length_validation({
      maxlength: 500,
      warning: 50,
      validationSelector: '#bio .note'
    })
  })

  $('#bio textarea').trigger('keyup');

})


jQuery.fn.char_length_validation = function(opts){

  chars_left = opts.maxlength - this.val().length;

  if(chars_left >= 0){
    $(opts.validationSelector + ' .value').text(chars_left);

    if(chars_left < opts.warning){
      $(opts.validationSelector).addClass('invalid');
    }
    else{
      $(opts.validationSelector).removeClass('invalid');
    }
  }
  else{
    this.value = this.value.substring(0, opts.maxlength);
  }
}

В HTML:

<div id="bio">
  <textarea>Some text</textarea>
  <p class="note>
    <span class="value">XX</span>
    <span> characters left</span>
  </p>
</div>

В частности, я чувствую себя очень неудобно, связывая событие для каждой клавишивместо однократного связывания и последующего вызова метода.

Кроме того, (и, следовательно, заголовок) мне нужно сначала вызвать метод (при отображении страницы), а затем каждый раз, когда пользователь вводит символ.

Заранее спасибо за ваше время:)

Answer 1

chars_left - глобальная переменная, которая совсем не годится.Вот лучшая (слегка измененная) версия:

jQuery.fn.char_length_validation = function(opts) {
    this.each(function() {
        var chars_left = opts.maxlength - $(this).val().length;
        $(this).keyup(function() {
            chars_left = opts.maxlength - $(this).val().length;
            if (chars_left >= 0) {
                $(opts.validationSelector).text(chars_left);   
                if (chars_left < opts.warning) {
                    $(opts.validationSelector).addClass('invalid');
                }
                else {
                    $(opts.validationSelector).removeClass('invalid');
                }
            }
            else {
                $(this).val($(this).val().substring(0, opts.maxlength));
            } 
        });
    });
    this.keyup(); // makes the "initial" execution
    return this;
};

См. DEMO .

Некоторое объяснение:

• В функции плагина jQuery, this относится к элементам, выбранным селектором.Вы должны использовать this.each(), чтобы выполнить цикл по всем этим параметрам и настроить каждый элемент соответствующим образом.
• В этом примере каждый элемент получает свою переменную chars_left.Обработчик события, переданный в keyup(), имеет к нему доступ, поскольку он является закрытием. Обновление: Здесь уже очень поздно;) Нет необходимости объявлять его здесь, так как вы все равно пересчитываете значение каждый раз.Тем не менее, это должно дать вам представление о том, как иметь частные переменные, которые сохраняются во времени.
• Вы должны всегда return this поддерживать цепочку.

Дополнительные мысли:

• Возможно, вы захотите подумать о том, как вы могли бы заставить его работать для нескольких текстовых областей (то есть вы должны подумать о селекторе проверки).Не привязывайте его к определенной структуре.
• У вас должны быть параметры по умолчанию.
• Обновление: Конечно, вы можете заставить свой плагин работать только с одной текстовой областью (например,некоторые функции jQuery работают).

Answer 2

Вы можете выполнить привязку и первоначальный запуск в методе:

jQuery.fn.charLengthValidation = function(opts) {
    return this.keyup(function() {
        var charsLeft = opts.maxLength - $(this).val().length;
        if (charsLeft >= 0) {
            $(opts.validationSelector + ' .value').text(charsLeft);
            $(opts.validationSelector).toggleClass('invalid', charsLeft < opts.warning);
        } else {
            $(this).val($(this).val().substring(0, opts.maxLength));
        }
    }).trigger('keyup');
}

$(function() {
    $('#bio textarea').charLengthValidation({
        maxLength: 25,
        warning: 10,
        validationSelector: '#bio .note'
    });
});