Как решить проблему с написанием модуля на javascript?

Question

[ZeFearKa]

Всем привет.
Я хочу повысить свой скилл в работе с javascript, написал свой класс карусели. Все работает превосходно.
НО: есть проблема если добавить несколько карусель на страницу. Пример прилагаю:

Код HTML

<script>
document.addEventListener('DOMContentLoaded', function () {
  	var carousel1 = new MmaCarousel('basic', {
  		showAgjrrows: true,
  		margin: 15,
  		responsive: {
  			0: {
  				items: 1
  			},
  			600: {
  				items: 3
  			},
  			1000: {
  				items: 5
  			}
  		}
  	});

	var carousel2 = new MmaCarousel('basic_clone', {
  		showAgjrrows: true,
  		margin: 15,
  		responsive: {
  			0: {
  				items: 1
  			},
  			600: {
  				items: 3
  			},
  			1000: {
  				items: 5
  			}
  		}
  	});
});
</script>
<h1 style="text-align: center;font-size: 30px;">BASIC CAROUSEL</h1>
<div style="width: 1000px;margin-left: auto;margin-right: auto;">
	<div class="mma-carousel" id="basic">
		<div class="mma-carousel__item">1</div>
		<div class="mma-carousel__item">2</div>
		<div class="mma-carousel__item">3</div>
		<div class="mma-carousel__item">4</div>
		<div class="mma-carousel__item">5</div>
		<div class="mma-carousel__item">...</div>
	</div>
</div>
<h1 style="text-align: center;font-size: 30px;">BASIC CAROUSEL CLONE</h1>
<div style="width: 1000px;margin-left: auto;margin-right: auto;">
	<div class="mma-carousel" id="basic_clone">
		<div class="mma-carousel__item">1</div>
		<div class="mma-carousel__item">2</div>
		<div class="mma-carousel__item">3</div>
		<div class="mma-carousel__item">4</div>
		<div class="mma-carousel__item">5</div>
		<div class="mma-carousel__item">...</div>
	</div>
</div>

Код JAVASCRIPT

function MmaCarousel (id, args) {
	var self = this;
	var active = 0;

	// arguments
	var showAgjrrows = args.showAgjrrows || false;
	var showDots = args.showDots || false;
	var numberVisibleItems = args.items || 1;
	var speed = args.speed || '300';
	var delay = args.delay || 5000;
	var autoplay = args.autoplay || true;
	var quantity = args.quantity || 1;

	// methods
	function toAssembled () {
		// elements
		obj = document.getElementById(id);

		if (!obj) return;

		contain = document.createElement('div');
		internal = document.createElement('div');
		controls = document.createElement('div');
		items = obj.getElementsByClassName('mma-carousel__item');

		// elements parameters
		containWidth = obj.clientWidth;
		itemMargin = 0;
		itemsLength = items.length;
		
		internal.classList.add('mma-carousel__internal');

		for (var i = itemsLength-1; i >= 0; i--) {
			internal.insertBefore(items[i], internal.firstChild);
		}
		
		contain.classList.add('mma-carousel__outer');
		contain.appendChild(internal);

		obj.appendChild(contain);

		// create controls
		arrowPrev = document.createElement('a');
		arrowPrev.innerHTML = "prev";
		arrowPrev.classList.add('mma-carousel__prev');
		arrowPrev.addEventListener('click', moveElement);

		arrowNext = document.createElement('a');
		arrowNext.innerHTML = "next";
		arrowNext.classList.add('mma-carousel__next');
		arrowNext.addEventListener('click', moveElement);

		arrows = document.createElement('div');
		arrows.classList.add('mma-carousel__arrows');
		arrows.appendChild(arrowPrev);
		arrows.appendChild(arrowNext);

		controls.classList.add('mma-carousel__controls');
		controls.appendChild(arrows);

		if (showAgjrrows || showDots)
			obj.appendChild(controls);

		contain.style.display = "block";
	}

	function carouselResize () {
		if (args.responsive) {
			for (var w in args.responsive) {
				// ?
			}
		}

		if (window.innerWidth >= 1000) {
			numberVisibleItems = 5;
		} else if (window.innerWidth >= 600) {
			numberVisibleItems = 3;
		} else if (window.innerWidth >= 100) {
			numberVisibleItems = 1;
		}
		
		setParams();
	}

	function setParams () {
		if(args.margin && (typeof args.margin == "number") && numberVisibleItems > 1)
			itemMargin = args.margin;

		elementWidth = containWidth / numberVisibleItems;
		internalWidth = (elementWidth * itemsLength) + (itemsLength * (itemMargin / numberVisibleItems));
		elementWidthSpace = (elementWidth - itemMargin) + (itemMargin / numberVisibleItems);

		[ ].forEach.call(items, function (item, i) {
			item.style.marginRight = itemMargin + "px";
			item.style.width = elementWidthSpace + "px";

			if (i < numberVisibleItems)
				item.classList.add('active');
		});

		translate = active * (elementWidthSpace + itemMargin);

		internal.style.width = internalWidth + "px";
		internal.style.transition = "0s";
		internal.style.transform = "translate3d(" + -translate + "px, 0px, 0px)";
	}

	function moveElement () {
		clearTimeout(stopMoveElement);

		internal.style.transition = speed / 1000 + "s";

		if (event) {
			if (event.target.innerHTML == "next")
				active += quantity;
			else if (event.target.innerHTML == "prev")
				active -= quantity;
		}
		else active += quantity;

		if (active < 0)
			active = itemsLength - numberVisibleItems;
		else if (active > itemsLength - numberVisibleItems)
			active = 0;

		moveWidth = active * (elementWidthSpace + itemMargin);

		internal.style.transform = "translate3d(" + -moveWidth + "px, 0px, 0px)";

		setTimeout(function () {
			internal.style.transition = "0s";
		}, speed);
		
		if (autoplay) {
			stopMoveElement = setTimeout(function () {
				moveElement();
			}, delay);
		}
	}

	// initialization
	function init () {
		toAssembled();
		carouselResize();
		if (autoplay) {
			stopMoveElement = setTimeout(function () {
				moveElement();
			}, delay);
		}

		window.addEventListener("resize",carouselResize);
	}

	return init();
}

Помогите очень хочу разобраться. На jQuery такое делать умею, поэтому этот вариант не предлагайте.

Comments

[Kovalsky]

Может скинете полностью рабочий пример на jsfiddle.net, например? В любом случае, зачем вы из конструктора явно возвращаете? К тому же возвращаете ничего, lol, undefined.

[ZeFearKa]

Народ, здесь пытаются найти решение проблемы, а не писать гневные комментарии.
Спасибо Алексей Зуев, за то что дал правильное решение.

Answer 1

[Алексей Зуев]

Ну я точно не знаю, можно попробовать добавить одну строчку прям в начало вашей функции

function MmaCarousel (id, args) {
  var obj, contain, internal, controls, items; <== вот эту

codepen.io/anon/pen/dpZOgW

Answer 2

[ZeFearKa]

Да именно в этом была проблема, я сам разобрался, вот только я все объекты вынес за функцию

var obj = document.getElementById(id);

if (!obj) return;

var contain = document.createElement('div');
var internal = document.createElement('div');
var controls = document.createElement('div');
var items = obj.getElementsByClassName('mma-carousel__item');

Как думаете какой вариант правильнее?

Comments

[Алексей Зуев]

Почитайте про область видимости переменных. У вас изначально они в глобальной области и перезаписываются, если сделаете так, то в других функциях вашего плагина их не будет.

[Алексей Зуев]

https://learn.javascript.ru/functions-closures вот это можете почитать подробнее

[ZeFearKa]

Огромное!!! Буду разбираться )