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>

特别是我觉得在每个keyup上绑定事件而不是绑定一次并稍后调用一个方法真的很不舒服。

此外，（因此标题）我需要最初调用该方法（当页面呈现时），然后每次用户输入一个字符。

提前感谢您的时间：）

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支持链接。

进一步的想法：

您可能想要考虑如何使其适用于几个textareas（即您必须考虑验证选择器）。不要将它绑在特定的结构上。
您应该有默认选项。
更新：当然，你可以让你的插件只使用一个textarea（就像一些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'
    });
});

在声明时调用jQuery方法，然后调用onEvent

2 个答案: