有没有办法“优化”这个简单的功能？ （我不遵循最佳做法吗？）

Question

我正在创建一个搜索字段，当您在清除按钮中键入内容时，会显示单击时将清除您键入的内容。当您放松输入字段的焦点时，清除按钮应该消失，但如果您专注于输入字段并且内部有某些内容，则会返回。

该功能不需要灵活到标记结构可以变化的意义，标记结构需要。它只需要容纳不同的选择器。

标记：

<div id="searchfield">
      <div id="clearbutton"></div>
      <input name="searchbox" type="text" id="searchbox">
</div>

JavaScript函数： （注意：我正在使用jQuery）

function clearableSearchBox(searchbox, clearbutton) {
    var searchbox = jQuery(searchbox);
    var clearbutton = jQuery(clearbutton);

    // When a user starts to enter into the textbox, fade in the clear button
    searchbox.keydown(function() {
        clearbutton.fadeIn('fast');
    });

    // When a user clicks the clear button, remove the contents of the searchbox
    clearbutton.click(function() {
        searchbox.val('');
    });

    // When the textbox is unfocused, fade out the clear button
    searchbox.focusout(function() {
        clearbutton.fadeOut('fast');
    });

    // If there's something in the search box, fade in the close button
    searchbox.focusin(function() {
        if(searchbox.val()) {
            clearbutton.fadeIn('fast');
        }
    });
}

最后，当您想要使用该功能时，请将其命名为：

clearableSearchBox("#searchbox", "#clearbutton");

我们非常感谢您对优化/最佳做法的任何建议。非常感谢！

Answer 1

如果使用$来为jquery变量添加前缀，那么最佳做法可能是最佳做法，例如：

function doSomething(selector) {
    var $selector = $(selector);
}

否则......不...我没有发现任何选择...

你可以使用链接，例如：

searchbox
// When a user starts to enter into the textbox, fade in the clear button
.keydown(function() {
    clearbutton.fadeIn('fast');
})
// When the textbox is unfocused, fade out the clear button
.focusout(function() {
    clearbutton.fadeOut('fast');
})
// If there's something in the search box, fade in the close button
.focusin(function() {
    if(searchbox.val()) {
        clearbutton.fadeIn('fast');
    }
});

但我不是那个大朋友...不知道为什么：）

Answer 2

将其设为jQuery插件：

$.fn.clearableSearchBox = function(searchbox, clearbutton) { 
    // all your code here
}

然后你可以这样称呼它：

$(selector).clearableSearchBox();

您也可以删除方法的第一个参数，并在方法中使用this，只要jQuery方法中使用的selector是您的搜索框：

$.fn.clearableSearchBox = function(clearbutton) { 
    this; // your search box.  
    // inside a plugin, 'this' is already a jquery object, 
    // so there is no need to wrap it with $(this)

    // all your code here
}

如果您要使用此模式，我建议您在js中动态生成清除和关闭按钮，以使插件尽可能易于使用且易于使用。

有关jQuery插件的更多信息，请查看documentation。

Answer 3

还有一点，你也可以链接事件绑定。

searchbox.keydown(function() {
    // code for keydown
}).focusout(function() {
   // code for focusout
}).focusin(function() {
    // code for focusin
});