SPAの開発に向けて、メンテしやすいコード作りを勉強してます。
jQueryでスライダーを作ったのですが、もっと良い書き方ありますか?
※今回はObserverの考え方は取り入れてません。
疑問点
- BEMベースのクラス名が長いので変数化したが、動的な部分は変数でないものもあり、混乱する
- そもそもクラス名の付け方やタグ構造が悪いから書きづらい?
- 最初に操作するセレクターはどこまで変数に格納すべきか
- BEMは使いたいけど長くなる
サンプルコード
前の質問で、アドバイスを貰い、定数のような扱いをやめました。
また動的な部分以外は、HTMLに直書きしました。
https://teratail.com/questions/126691
皆さんだったらどう書きますか?
HTML
1 <div id="slider" class="slider"> 2 <div class="slider_view"> 3 <a class="slider_view_item" href="#"><img src="img/thumb-01.jpg" alt=""></a> 4 <a class="slider_view_item" href="#"><img src="img/thumb-02.jpg" alt=""></a> 5 <a class="slider_view_item" href="#"><img src="img/thumb-03.jpg" alt=""></a> 6 <a class="slider_view_item" href="#"><img src="img/thumb-04.jpg" alt=""></a> 7 <a class="slider_view_item" href="#"><img src="img/thumb-05.jpg" alt=""></a> 8 </div> 9 <div class="slider_nav"></div> 10 <div class="slider_control"> 11 <button class="slider_control_item slider_control_item-prev" type="button" data-role="none" role="button"></button> 12 <button class="slider_control_item slider_control_item-next" type="button" data-role="none" role="button"></button> 13 </div> 14 </div>
JS
1$(function(){ 2 3 var $target = $('#slider'); 4 var $item = $target.find('.slider_view_item'); 5 var $prev = $target.find('.slider_control_item-prev'); 6 var $next = $target.find('.slider_control_item-next'); 7 8 var index = 1; 9 10 function init(){ 11 12 var _navHtml = '<button class="slider_nav_item" type="button" data-role="none" role="button"></button>'; 13 $item.each(function(){ 14 $target.find('.slider_nav').append(_navHtml); 15 }); 16 17 $target.find('.slider_nav_item').each(function(i){ 18 $(this).on("click",function(){ 19 view(i + 1); 20 }); 21 }); 22 23 $prev.on("click",function(){ 24 view(index - 1); 25 }); 26 $next.on("click",function(){ 27 view(index + 1); 28 }); 29 30 view(index); 31 32 } 33 34 35 function view(val){ 36 37 index = val; 38 39 $item.hide().each(function(i){ 40 if(index == i + 1){ 41 $(this).show(); 42 return false; 43 } 44 }); 45 46 $target.find('.slider_nav_item').removeClass('is-active').each(function(i){ 47 if(index == i + 1){ 48 $(this).addClass('is-active'); 49 return false; 50 } 51 }); 52 53 var _count = $item.length; 54 $prev.show(); 55 $next.show(); 56 if(index <= 1) $prev.hide(); 57 if(index >= _count) $next.hide(); 58 59 } 60 61 init(); 62 63}); 64
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。