Есть ли способ «оптимизировать» эту простую функцию? (я не следую передовым методам?)

Question

Я создаю поле поиска, которое, когда вы вводите что-то в прозрачную кнопку, появляется там, где при нажатии будет очищаться то, что вы печатали. Кнопка очистки должна исчезнуть, когда вы потеряете фокус поля ввода, но вернитесь, если вы сфокусировались на поле ввода и внутри него что-то есть.

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

Markup:

<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на своем месте в вашем методе, пока selector, используемое в методе jQuery, является вашим окном поиска:

$.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
}

Если вы собираетесь использовать этот шаблон, я бы порекомендовал создать clear и closeкнопки в вашем js динамически, чтобы сделать плагин максимально пригодным для повторного использования и простым в использовании.

Для получения дополнительной информации о плагинах jQuery см. документацию .

Answer 3

Еще одна точка, вы можете связать события привязки также.

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