Как по-человечески должен выглядеть такой js(jquery) код?

Question

[Роман Татаринов]

Вот моя лапша. Как ее на самом деле нужно писать?

$('.view1').click(function(){
   $(this).addClass('view1--active');
   $('.view2').removeClass('view2--active');
   $('.view3').removeClass('view3--active');
   $('.maicol-catalog').removeClass('catalog-view2');
   $('.maicol-catalog').removeClass('catalog-view3');
   $('.maicol-catalog').addClass('catalog-view1')
});
$('.view2').click(function(){
   $(this).addClass('view2--active');
   $('.view1').removeClass('view1--active');
   $('.view3').removeClass('view3--active');
   $('.maicol-catalog').removeClass('catalog-view1');
   $('.maicol-catalog').removeClass('catalog-view3');
   $('.maicol-catalog').addClass('catalog-view2')
});
$('.view3').click(function(){
   $(this).addClass('view3--active');
   $('.view2').removeClass('view2--active');
   $('.view1').removeClass('view1--active');
   $('.maicol-catalog').removeClass('catalog-view1');
   $('.maicol-catalog').removeClass('catalog-view2');
   $('.maicol-catalog').addClass('catalog-view3')
});

Answer 1

[Алексей Уколов]

Скорее всего, делать классы view(1/2/3) нет смысла, вполне можно обойтись одним. И view(1/2/3)--active тоже лишние. Единственное, что нужно - менять класс у обёртки каталога. Тогда код становится таким:

$('.view').click(function(){
   var $el = $(this),
       type = $el.data('view-type');

   $('.view.view--active').removeClass('view--active');
   $el.addClass('view--active');

   $('.maicol-catalog').removeClass('catalog-view1 catalog-view2 catalog-view3');
   $('.maicol-catalog').addClass('catalog-view' + type);
});

Ну и 1/2/3 нужно заменить на осмысленные слова: table/cards/feed или что там у вас по смыслу.