javascript - Which of these packaging solutions is the best practice? ~

Question

Initial status:

var searchMain = $('.c-search_search'), // 搜索本体
    searchBtn = $('.c-search_searchBtn'), // 取消按钮
    searchIcon = $('.weui_icon_search'); // 搜索图标
    
if (searchMain.val()) {
    searchIcon.addClass('weui_icon_search-focus');
}

searchMain.on('focus', function () {
    searchBtn.show();
    searchIcon.addClass('weui_icon_search-focus');
}).on('blur', function () {
    if (!this.value) {
        searchBtn.hide();
        searchIcon.removeClass('weui_icon_search-focus');
    }
});

1. Obviously the most repeated class name is weui_icon_search-focus. So would it be better to save variables? If you need to modify it, just modify it

var searchMain = $('.c-search_search'), // 搜索本体
    searchBtn = $('.c-search_searchBtn'), // 取消按钮
    searchIcon = $('.weui_icon_search'), // 搜索图标
    searchIconFocus = 'weui_icon_search-focus';
    
if (searchMain.val()) {
    searchIcon.addClass(searchIconFocus);
}

searchMain.on('focus', function () {
    searchBtn.show();
    searchIcon.addClass(searchIconFocus);
}).on('blur', function () {
    if (!this.value) {
        searchBtn.hide();
        searchIcon.removeClass(searchIconFocus);
    }
});

2.focus blur These two events actually have almost the same operation behavior, so do they need to be encapsulated? In this case, we can also solve the problem of weui_icon_search-focus written in multiple places

var searchMain = $('.c-search_search'), // 搜索本体
    searchBtn = $('.c-search_searchBtn'), // 取消按钮
    searchIcon = $('.weui_icon_search'), // 搜索图标
    searchIconFocus = 'weui_icon_search-focus';
    
if (searchMain.val()) {
    searchIcon.addClass(searchIconFocus);
}

searchMain.on('focus', function () {
    fn();
}).on('blur', function () {
    if (!this.value) {
        fn(true);
    }
});

function fn(a) {
    searchBtn[ a ? 'hide' : 'show' ]();
    searchIcon[ a ? 'removeClass' : 'addClass' ]('weui_icon_search-focus');
}

But the operation of the position judged by if (searchMain.val()) cannot be helped. I think it should also be together with fn. After all, it is the same as one of the behaviors. If so, it needs to be changed. I changed it twice. Although I can add a parameter to fn so that it only executes the second sentence, I always feel uncomfortable doing this. If it is executed normally, it still has to go through that level of judgment~

Is there any perfect solution that you can’t find? ~

Answer 1

I can’t think of a better way. Personally, I think if the variable is a jquery object, $ can be added to distinguish it

var $searchMain = $('.c-search_search'), // Search ontology

$searchBtn = $('.c-search_searchBtn'), // 取消按钮
$searchIcon = $('.weui_icon_search'), // 搜索图标
searchIconFocus = 'weui_icon_search-focus';

if ($searchMain.val()) {

fn(false,false);

}

$searchMain.on('focus', function () {

fn();

}).on('blur', function () {

if (!this.value) {
    fn(true);
}

});

function fn(a,mark) {

$searchIcon[ a ? 'removeClass' : 'addClass' ](searchIconFocus);
if(mark || true){
    $searchBtn[ a ? 'hide' : 'show' ]();
}

}

Answer 2

You are encapsulating it for the sake of encapsulation. It is best for a function to only do one thing.

hide and show can also be packaged together with a toggle, but ordinary addClass is obviously different from this function.

You only need one command here, so there is no point in encapsulating them together. And if you have a similar requirement at this time, do you need to add another judgment to the function you encapsulated?

The purpose of encapsulating functions here is to enhance readability, but blindly encapsulating similar functions together is the opposite.

Answer 3

I agree with the answer above.

Your requirement is to display one element and add a class to another element when it gets focus. Losing focus is the opposite.

Then your implementation should be

// 通常jq对象命名前会加$,以便和dom对象区分。
$el
    .on('focus',function(){
        // TODO
    })
    .on('blur',function(){
        // TODO
    });

The logic is clear and clear, why do we need unnecessary encapsulation?

If you must consider simplification, you should consider it from the perspective of displaying elements and adding a class style to the elements. For example, I add a class show to the parent element. To use the sub-selector in css to complete your problem of showing and hiding and style switching of the element.

/* 父元素 */
.parent {
    
}
/* 两个子元素 */
.child1 {
    /* 默认将其隐藏 */
    display: hidden;
}
.child2 {
    /* 写入不受weui_icon_search-focus类影响的样式 */
}

.parent.show .child1 {
    /* show状态下的child1需要显示出来 */
    display: block;
}
.parent.show .child2 {
    /* show状态时 child2 样式改变 */
    /* 写入weui_icon_search-focus类下的样式 */
}

In this way, you only need to add the .parent这个元素添加show样式，blur style to the .parent element when it is focused, and remove it when it is blur.