javascript – Welche dieser Verpackungslösungen ist die beste Vorgehensweise? ~

Question

Anfangsstatus:

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. Der am häufigsten wiederholte Klassenname ist also weui_icon_search-focus. Wenn Sie ihn ändern müssen, ändern Sie ihn einfach an einer Stelle

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.Fokusunschärfe Diese beiden Ereignisse haben tatsächlich fast das gleiche Betriebsverhalten. Müssen sie in diesem Fall auch das an vielen Stellen geschriebene Problem von weui_icon_search-focus lösen?

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');
}

Aber der Betrieb der Position, beurteilt durch if (searchMain.val()), kann meiner Meinung nach auch nicht mit fn zusammen sein, wenn Sie es ändern möchten , Sie müssen zwei Parameter ändern, damit nur der zweite Satz ausgeführt wird. Wenn es normal ausgeführt wird, muss es dennoch diese Beurteilungsebene durchlaufen

Haben Sie eine perfekte Lösung? ~

Answer 1

想不出有更好的办法，个人觉得变量为jquery对象可以加上$以便区分

var $searchMain = $('.c-search_search'), // 搜索本体

$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

你这就有点为了封装而封装了，一个函数最好只干一件事情。

hide跟show你还可以用一个toggle封装在一起，但是普通的addClass显然就和这个功能有差别了。

你这里本来就只要一句命令就够了，非得封装在一起毫无意义。而且如果这时你又有一个类似的需求，难道你又要在你封装的函数里再加一个判断吗？

你这里封装函数的目的是增强可读性，可是盲目把类似功能都封装在一起就是南辕北辙了。

Answer 3

赞同楼上答案。

你的需求就是获取焦点时，显示一个元素，并给另一个元素添加一个类。失去焦点则相反。

那么你的实现应该是

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

逻辑清楚明了，为何要做无谓的封装？

一定要考虑简化的话，应该是从显示元素并给元素添加一个类的样式上来考虑。比如我在父元素上添加一个类show。 来使用css中的子选择器完成你对元素显示隐藏和样式切换的问题。

/* 父元素 */
.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类下的样式 */
}

这样就只用在focus时给.parent这个元素添加show样式，blur时移除即可。