Структурирование кода js

287

30 июня 2017, 09:03

Подскажите, как можно структурировать js-код, т.е. сделать его более читабельным, сократить (но не минифицировать), вобщем, упростить дальнейшую поддержку кода?
т.е. сделать код может быть в виде плагина, объединить повторяющиеся участки кода.
Допустим имеется код:

$('.slider1').slick({
    dots: false,
    prevArrow: '<button type="button" class="slick-prev"><i></i></button>',
    nextArrow: '<button type="button" class="slick-next"><i></i></button>',
});

//Слайдер товара
$('.slider2').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    prevArrow: '<button type="button" class="slick-prev"><i></i></button>',
    nextArrow: '<button type="button" class="slick-next"><i></i></button>',
    asNavFor: '.js-item-slider-nav'
});
$('.slider3').slick({
    slidesToShow: 7,
    slidesToScroll: 1,
    asNavFor: '.item-slider',
    dots: false,
    focusOnSelect: true
});
var wpoint,$el=$('#point1');
wpoint=$el.waypoint(function(direction){
    $el.addClass('viewed');
    wpoint[0].destroy();
}, {
    offset: '65%'
});
var wpoint1,$el1=$('#point2');
wpoint1=$el1.waypoint(function(direction){
    $el1.addClass('viewed');
    wpoint1[0].destroy();
}, {
    offset: '70%'
});

по идее три инициализации slick-слайдера можно объединить в один код, допустим задать параметры по умолчанию, такие как prevArrow,nextArrow, и потом с помощью extend добавлять параметры для конкретного слайдера.
Тоже самое интересует по остальному коду, т.е. waypoint можно по идее как-то объединить в один расширяемый код.
Подскажите, как это правильно сделать? Как организовать код, убрать повторяющиеся участки кода?

Answer 1

Что-то типа такого для первой половины

<div class="slider-slick slider1" data-key="slider1"></div>
<div class="slider-slick slider2" data-key="slider2"></div>
<div class="slider-slick slider3" data-key="slider3"></div>

<script type="text/javascript">
 var slickObject = {
  slider1: {
   dots: false,
   prevArrow: '<button type="button" class="slick-prev"><i></i></button>',
   nextArrow: '<button type="button" class="slick-next"><i></i></button>',
  },
  slider2: {
   slidesToShow: 1,
   slidesToScroll: 1,
   fade: true,
   prevArrow: '<button type="button" class="slick-prev"><i></i></button>',
   nextArrow: '<button type="button" class="slick-next"><i></i></button>',
   asNavFor: '.js-item-slider-nav'
  },
  slider3: {
   slidesToShow: 7,
   slidesToScroll: 1,
   asNavFor: '.item-slider',
   dots: false,
   focusOnSelect: true
  }
 };
 $('.slider-slick').each(function(){
  var $this = $(this);
  $this.slick(slickObject[$this.attr('data-key')]);
 });
</script>

И что-то типа такого для второй половины

<div class="waypoint point1" data-offset="65%"></div>
<div class="waypoint point2" data-offset="70%"></div>

<script type="text/javascript">
 var waypoint = {};
 $('.waypoint').each(function(){
  var $this = $(this);
  waypoint[$this.index()] = $this.waypoint(function(direction){
   $this.addClass('viewed');
   waypoint[$this.index()].destroy();
  }, {
   offset: $this.attr('data-offset')
  });
 });
</script>