javascript - Laquelle de ces solutions d'emballage est la meilleure pratique ? ~

Question

Statut initial :

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. De toute évidence, le nom de classe le plus répété est weui_icon_search-focus. Alors, serait-il préférable de sauvegarder les variables si vous devez le modifier, modifiez-le simplement au même endroit ?

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 Ces deux événements ont en fait presque le même comportement de fonctionnement, doivent-ils donc être encapsulés. Dans ce cas, nous pouvons également résoudre le problème de weui_icon_search-focus écrit à de nombreux endroits ?

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

Mais le fonctionnement de la position jugé par if (searchMain.val()) ne peut pas être aidé. Je pense qu'il devrait également être associé à fn. Après tout, c'est la même chose que l'un des comportements. , vous devez en changer deux. Bien que vous puissiez ajouter un paramètre à fn pour qu'il n'exécute que la deuxième phrase, je me sens toujours mal à l'aise de le faire s'il est exécuté normalement, il doit quand même passer par ce niveau de jugement~

.

Avez-vous une solution parfaite ? ~

Answer 1

Je ne peux pas penser à une meilleure façon Personnellement, je pense que si la variable est un objet jquery, $ peut être ajouté pour la distinguer

var $searchMain = $('.c-search_search'), // Ontologie de recherche

$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('flou', function() {

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

});

fonction fn(a,mark) {

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

}

Answer 2

Vous l'encapsulez pour le plaisir de l'encapsulation. Il est préférable qu'une fonction ne fasse qu'une seule chose.

hide et show peuvent également être regroupés avec une bascule, mais addClass ordinaire est évidemment différent de cette fonction.

Vous n'avez besoin que d'une seule commande ici, il ne sert donc à rien de les encapsuler ensemble. Et si vous avez actuellement une exigence similaire, devez-vous ajouter un autre jugement à la fonction que vous avez encapsulée ?

Le but de l'encapsulation de fonctions ici est d'améliorer la lisibilité, mais encapsuler aveuglément des fonctions similaires ensemble est le contraire.

Answer 3

D'accord avec la réponse ci-dessus.

Votre exigence est d'afficher un élément et d'ajouter une classe à un autre élément lorsqu'il obtient le focus. La perte de concentration est le contraire.

Alors votre mise en œuvre devrait être

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

La logique est claire et nette, pourquoi une encapsulation inutile ?

Si vous devez envisager une simplification, vous devez la considérer du point de vue de l'affichage des éléments et de l'ajout d'un style de classe aux éléments. Par exemple, j'ajoute une classe show à l'élément parent. Utiliser le sous-sélecteur en CSS pour résoudre vos problèmes d'affichage/masquage d'éléments et de changement de style. 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

De cette façon, il vous suffit d'ajouter le style show à l'élément .parent lors de la mise au point, et de le supprimer lors du flou est utilisé. #🎜🎜#