Question

首先，我想提一下，这个问题的目的不是要问它是如何完成的，而是要理解为什么我这样做的方式。

我想为表单元素创建占位符文本，在使用jquery时，我想出了以下代码：

function placehold(id,placeholder) // id of element and placeholder text
{
    $("#"+id).val(placeholder); //initialize form field

    $("#"+id).focusin(function() //on focus
    {
        if ($(this).val()==(placeholder))
        {
            $(this).val(null); 
            /*if input's value is placeholder then empty
              input and wait for value */
        }        
    });


    $("#"+id).focusout(function() //on lost focus
    {
        if ($(this).val()==(""))
        {
            $(this).val(placeholder); //reset val to placeholder text if empty
        }        
    });
}

即使我在几个字段上调用该函数，这仍然有效，例如，

placehold('uname','Please enter a username');
placehold('pword','Please enter a password);
placehold('email','Please enter an email address');

在上述情况下，它将按预期在所有3个文本框中工作，这就是我的问题：运行时期间存储的不同占位符在哪里？是为它所绑定的每个字段保留的函数的实例？如果是，从长远来看，这会对绩效产生什么影响？

感谢您的时间和帮助：）

Answer 1

是为其绑定的每个字段保留的函数的实例吗？

是。每次调用placehold()时，都会创建新的事件处理函数。 id和placeholder的值将作为您创建的闭包的一部分保留。

如果是，从长远来看，这会对绩效产生什么影响？

你这样做的方式，你调用placehold()的每个元素都会产生一些开销。我不担心，但它确实可以忽略不计。

Nicer将重用事件处理函数：

function placeholderEmpty() { 
    var $this = $(this);
    if ( $this.val() == $this.data("placeholder") ) {
        $this.val(""); 
    }        
}
function placeholderDefault() {
    var $this = $(this);
    if ( $this.val() == "" ) {
        $this.val( $this.data("placeholder") ); 
    }        
}

function placehold(id,placeholder) {
  $("#"+id).data("placeholder", placeholder) 
  .focusin(placeholderEmpty)
  .focusout(placeholderDefault)
  .trigger("focusout");
}

下一步是插件（注意使用另一个闭包）：

$.fn.extend({
  placehold: function () {
    var placeholderEmpty   = function () { /* ... */ };
    var placeholderDefault = function () { /* ... */ };

    return function(placeholder) {
      this.data("placeholder", placeholder) 
      .focusin(placeholderEmpty)
      .focusout(placeholderDefault)
      .trigger("focusout");
      return this; 
    }
  }();
});

用作

$('#uname').placehold('Please enter a username');
$('#pword').placehold('Please enter a password');
$('#email').placehold('Please enter an email address');
$('.manyTextFields').placehold('All get the same text & behavior.');

使用Jquery的表单元素的占位符

1 个答案: