javascript - Manakah antara penyelesaian pembungkusan ini merupakan amalan terbaik? ~

Question

Status awal:

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. Jelas sekali nama kelas yang paling berulang ialah weui_icon_search-focus Jadi adakah lebih baik untuk menyimpan pembolehubah Jika anda perlu mengubahnya, ubah suai sahaja di satu tempat

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 Kedua-dua acara ini sebenarnya mempunyai gelagat operasi yang hampir sama, jadi adakah ia perlu dikapsulkan Dalam kes ini, kita juga boleh menyelesaikan masalah weui_icon_search-focus yang ditulis di banyak tempat

?

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

Tetapi operasi kedudukan yang dinilai oleh if (searchMain.val()) tidak boleh dibantu , anda perlu menukar dua. Walaupun anda boleh menambah parameter pada fn supaya ia hanya melaksanakan ayat kedua, saya sentiasa berasa tidak selesa melakukan ini Jika ia dilaksanakan secara normal, ia masih perlu melalui tahap penghakiman itu~

Adakah anda mempunyai sebarang penyelesaian yang sempurna? ~

Answer 1

Saya tidak dapat memikirkan cara yang lebih baik, saya fikir jika pembolehubah itu adalah objek jquery, $ boleh ditambah untuk membezakannya.

var $searchMain = $('.c-search_search'), // Ontologi carian

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

jika ($searchMain.val()) {

fn(false,false);

}

$searchMain.on('fokus', fungsi () {

fn();

}).on('kabur', fungsi () {

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

});

fungsi fn(a,tanda) {

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

}

Answer 2

Anda merangkumnya demi pengkapsulan Adalah lebih baik untuk sesuatu fungsi hanya melakukan satu perkara.

sorok dan tunjukkan juga boleh dibungkus bersama dengan togol, tetapi addClass biasa jelas berbeza daripada fungsi ini.

Anda hanya memerlukan satu arahan di sini, jadi tidak ada gunanya merangkumnya bersama-sama. Dan jika anda mempunyai keperluan yang sama pada masa ini, adakah anda perlu menambah pertimbangan lain pada fungsi yang anda enkapsulasi?

Tujuan merangkum fungsi di sini adalah untuk meningkatkan kebolehbacaan, tetapi membuta tuli merangkum fungsi serupa bersama adalah sebaliknya.

Answer 3

Saya setuju dengan jawapan di atas.

Keperluan anda adalah untuk memaparkan satu elemen dan menambah kelas kepada elemen lain apabila ia mendapat fokus. Hilang fokus adalah sebaliknya.

Maka pelaksanaan anda hendaklah

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

Logiknya jelas dan jelas, kenapa perlu enkapsulasi yang tidak perlu?

Jika anda mesti mempertimbangkan pemudahan, anda harus mempertimbangkannya dari perspektif memaparkan elemen dan menambah gaya kelas pada elemen. Sebagai contoh, saya menambah kelas show pada elemen induk. Untuk menggunakan sub-pemilih dalam CSS untuk menyelesaikan masalah paparan/sembunyikan dan gaya anda. 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 rrreee

Dengan cara ini, anda hanya perlu menambah gaya show pada elemen .parent apabila ia difokuskan dan mengalih keluarnya apabila ia blur. 🎜