SPAの開発に向けて、メンテしやすいコード作りを勉強してます。
jQueryでスライダーを作ったのですが、もっと良い書き方ありますか？
※今回はObserverの考え方は取り入れてません。

 疑問点

• BEMベースのクラス名が長いので変数化したが、動的な部分は変数でないものもあり、混乱する
• そもそもクラス名の付け方やタグ構造が悪いから書きづらい？
• 最初に操作するセレクターはどこまで変数に格納すべきか
• BEMは使いたいけど長くなる

 サンプルコード

前の質問で、アドバイスを貰い、定数のような扱いをやめました。
また動的な部分以外は、HTMLに直書きしました。
https://teratail.com/questions/126691

皆さんだったらどう書きますか？

  <div id="slider" class="slider">
    <div class="slider_view">
      <a class="slider_view_item" href="#"><img src="img/thumb-01.jpg" alt=""></a>
      <a class="slider_view_item" href="#"><img src="img/thumb-02.jpg" alt=""></a>
      <a class="slider_view_item" href="#"><img src="img/thumb-03.jpg" alt=""></a>
      <a class="slider_view_item" href="#"><img src="img/thumb-04.jpg" alt=""></a>
      <a class="slider_view_item" href="#"><img src="img/thumb-05.jpg" alt=""></a>
    </div>
    <div class="slider_nav"></div>
    <div class="slider_control">
      <button class="slider_control_item slider_control_item-prev" type="button" data-role="none" role="button"></button>
      <button class="slider_control_item slider_control_item-next" type="button" data-role="none" role="button"></button>
    </div>
  </div>

$(function(){

  var $target        = $('#slider');
  var $item          = $target.find('.slider_view_item');
  var $prev          = $target.find('.slider_control_item-prev');
  var $next          = $target.find('.slider_control_item-next');

  var index          = 1;

  function init(){

    var _navHtml = '<button class="slider_nav_item" type="button" data-role="none" role="button"></button>';
    $item.each(function(){
      $target.find('.slider_nav').append(_navHtml);
    });

    $target.find('.slider_nav_item').each(function(i){
      $(this).on("click",function(){
        view(i + 1);
      });
    });

    $prev.on("click",function(){
      view(index - 1);
    });
    $next.on("click",function(){
      view(index + 1);
    });

    view(index);

  }


  function view(val){

    index = val;

    $item.hide().each(function(i){
      if(index == i + 1){
        $(this).show();
        return false;
      }
    });

    $target.find('.slider_nav_item').removeClass('is-active').each(function(i){
      if(index == i + 1){
        $(this).addClass('is-active');
        return false;
      }
    });

    var _count = $item.length;
    $prev.show();
    $next.show();
    if(index <= 1) $prev.hide();
    if(index >= _count) $next.hide();

  }

  init();

});