javascript - 這幾種封裝方案哪一種才是最佳實務？ ~

Question

最初狀態：

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.顯然重複最多的是 weui_icon_search-focus 這個類別名稱 那麼提出來存變數會不會好一些 萬一要修改的話修改一處就好

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 這兩個事件其實操作的行為差不多相同 那麼需不需要封裝 這樣的話還可以順便解決 weui_icon_search-focus 多處寫的問題

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

但是if (searchMain.val()) 這句判斷的那個位置的操作就沒辦法了我覺得它也應該和fn 在一起吧畢竟它和其中的一條行為是一樣的這樣的話要改又要改兩次了雖然可以給fn 加個參數讓其只執行第二句但這樣做我總覺得不爽啊如果正常執行的話還要經過那一層判斷~

各位還有什麼完美的解決辦法不了？ ~

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這個元素添加.parent这个元素添加show样式，blur樣式，blur時移除即可。