javascript - 在声明时调用 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>

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

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

提前感谢您的宝贵时间:)

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() 的事件处理程序可以访问它，因为它是一个闭包。 更新: 这里已经很晚了 ;) 没有必要在这里声明它，因为无论如何您每次都重新计算该值。不过，它应该会让您了解如何拥有随时间持续存在的私有(private)变量。
• 您应该始终返回此以支持链接。

进一步的思考:

• 您可能需要考虑如何让它适用于多个文本区域(即您必须考虑验证选择器)。不要将其绑定(bind)到特定结构。
• 您应该有默认选项。
• 更新:当然，您可以让您的插件只与一个文本区域一起工作(就像某些 jQuery 函数一样)。