javascript - 次のパッケージ化ソリューションのうち、ベスト プラクティスはどれですか? ～

Question

初期ステータス:

リーリー

1. 明らかに、最も頻繁に繰り返されるクラス名は weui_icon_search-focus です。変数を保存したほうがよいでしょうか? 変更する必要がある場合は、そのまま変更してください

リーリー

2.focus Blur この 2 つのイベントは実際には動作動作がほぼ同じなので、カプセル化する必要がありますか? この場合、複数の場所に記述されている weui_icon_search-focus の問題も解決できます。 リーリー

ただし、if(searchMain.val())で判断した位置の操作は仕方ないので、fnも一緒にすべきだと思います。結局、挙動の一つと同じです。そうであれば、変更する必要があります。2回変更しました。fnにパラメータを追加して2番目の文だけを実行することもできますが、これを行うといつも不快に感じます。正常に実行される場合でも、そのレベルの判断を経る必要があります~

あなたが見つけられない完璧な解決策はありますか? ~

Answer 1

個人的には、変数が jquery オブジェクトの場合、それを区別するために $ を追加できると思います

var $searchMain = $('.c-search_search'), // オントロジーを検索します

リーリー

if ($searchMain.val()) {

リーリー

}

$searchMain.on('フォーカス', function () {

リーリー

}).on('ぼかし', function () {

リーリー

});

関数 fn(a,mark) {

リーリー

}

Answer 2

カプセル化するためにカプセル化しているのです。関数は 1 つのことだけを実行するのが最善です。

hideとshowもtoggleと一緒にパッケージ化できますが、通常のaddClassは明らかにこの関数とは異なります。

ここで必要なコマンドは 1 つだけなので、それらを一緒にカプセル化する意味はありません。また、現時点で同様の要件がある場合、カプセル化した関数に別の判断を追加する必要がありますか?

ここで関数をカプセル化する目的は可読性を高めることですが、同様の関数をやみくもにカプセル化することはその逆です。

Answer 3

上記の回答に同意します。

あなたの要件は、1 つの要素を表示し、フォーカスを取得したときに別の要素にクラスを追加することです。集中力を失うことはその逆です。

その場合、実装は次のようになります

リーリー

ロジックは明確です。なぜ不必要なカプセル化が必要なのでしょうか?

単純化を考慮する必要がある場合は、要素の表示と要素へのクラス スタイルの追加の観点から検討する必要があります。たとえば、親要素にクラス show を追加します。 CSS でサブセレクターを使用して、 要素の と スタイルの切り替え の表示と非表示の問題を完了するには。

リーリー

この方法では、フォーカスされている場合は .parent 要素に .parent这个元素添加show样式，blur スタイルを追加し、blur の場合は削除するだけで済みます。