Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   pattern module (передать переменную) (https://javascript.ru/forum/misc/57798-pattern-module-peredat-peremennuyu.html)

Lemme 20.08.2015 03:51

pattern module (передать переменную)
 
Возможно подобное?

var foo = (function () {
	
	var _smth; // this

	_bar = function () { // gonna be used here
    	alert(_smth);
    }

	return {
		bar: function (smth) {
			_smth = smth;
		}
	}
})();

foo.bar('something');


Использовать буду это для поиска элемента внутри контейнера, который будет передаваться в метод init, в модуле ниже:

var dgd = (function () {

	var _container = document.querySelector('.slider');
	var _controller = document.querySelector('.ctrl');

	/**
	 * [_getCoords]
	 * @param  {[object]} el [DOM node]
	 * @return {[integer]}    [return coordinates of element]
	 */
	var _getCoords = function (el) {

		return el.getBoundingClientRect().left + pageYOffset;
	};

	var _ctC, _ctrlC;

	/**
	 * [_start define coordinates and adding even listeners]
	 * @param  {[event]} e [onMouseDown]
	 * @return {[boolean]}   [disable selection start]
	 */
	var _start = function (e) {

		_ctrlC = _getCoords(_controller) - e.pageX;
		_ctC = _getCoords(_container);

		document.addEventListener('mousemove', _move);
		document.addEventListener('mouseup', _end);

		return false;
	};

	/**
	 * [_leftEdge]
	 * @param  {[integer]} pos [position of the controller in the container]
	 * @return {[integer]}     [0 or @param pos]
	 */
	var _leftEdge = function (pos) {

		return pos < 0 ? 0 : pos;
	};

	/**
	 * [_rightEdge]
	 * @param  {[integer]} pos [position of the controller in the container]
	 * @return {[integer]}     [right edge of container or @param pos]
	 */
	var _rightEdge = function (pos) {
		var edge = _container.offsetWidth - _controller.offsetWidth;

		return pos > edge ? edge : pos;
	};

	/**
	 * [_move makes controller draggable]
	 * @param  {[event]} e [onMouseMove]
	 */
	var _move = function (e) {

		var pos = e.pageX - _ctrlC - _ctC;
		var pLeft = pos;

		if (pos !== _leftEdge(pos)) {
			pLeft = _leftEdge(pos);
		}

		if (pos !== _rightEdge(pos)) {
			pLeft = _rightEdge(pos);
		}

		_controller.style.left = pLeft + 'px';
	};

	/**
	 * [_end dissable draggable]
	 * @param  {[event]} e [onMouseUp]
	 */
	var _end = function (e) {

		document.removeEventListener('mousemove', _move);
		document.removeEventListener('mouseup', _end);
	};

	return {
		init: function() {
            _container.addEventListener = function () {
            	return false;
            }
			_controller.addEventListener('mousedown', _start);
		}
	}
})();

dgd.init();


Вот рабочий пример:
http://jsfiddle.net/vtndsk3c/6/

Пример кода взят отсюда https://learn.javascript.ru/drag-and-drop#слайдер

btw. sorry for my English ;)

Lemme 20.08.2015 15:46

<div class="parent1">
    <div class="container">
        <div class="controller">Ctrl #1</div>
    </div>
</div>

<div class="parent2">
    <div class="container">
        <div class="controller">Ctrl #2</div>
    </div>
</div>

var foo = (function () {

	var _parentC;
	var _container = document.querySelector(_parentC + ' .container');
	var _controller = document.querySelector(_parentC + ' .controller');

	var _bar = function () {
		alert(_controller.innerHTML);
	}

	return {
		init: function (parentC) {
			_parentC = parentC;
            _bar();
		}
	}
})();

foo.init('.parent1');
foo.init('.parent2');


Я понимаю, что можно сделать так:

var foo = (function () {

	var _container, _controller;

	var _setElements = function (parentC) {
		_container = document.querySelector(parentC + ' .container');
		_controller = document.querySelector(parentC + ' .controller');
	}

	var _bar = function () {
		alert(_controller.innerHTML);
	}

	return {
		init: function (parentC) {
			_setElements(parentC);
			_bar();
		}
	}
})();

foo.init('.parent1');
foo.init('.parent2');


Но может есть еще варианты?

Rise 20.08.2015 16:24

Lemme, не получится, _parentC тока будет меняться, при вызове _bar() будет ошибка (строка 12).
var foo = (function () {
 
    var _parentC; // _parentC = undefined
    var _container = document.querySelector(_parentC + ' .container');
    // _container = document.querySelector('undefined .container')
    // _container = null
    var _controller = document.querySelector(_parentC + ' .controller');
    // _controller = document.querySelector('undefined .controller')
    // _controller = null
    var _bar = function () {
        alert(_controller.innerHTML);
        // alert(null.innerHTML);
    }
 
    return {
        init: function (parentC) {
            _parentC = parentC;
            _bar();
        }
    }
})();

nerv_ 20.08.2015 16:58

Цитата:

Сообщение от Rise
_controller для чего?

чтобы контролировать! :D

Lemme, забудь ты об этих извращениях. Использую обычные конструкторы (для начала). Модули уже в ecma есть :)

Lemme 20.08.2015 17:07

Rise, используется все=)

nerv_, забуду, но я не могу пока писать, не тестируя, а постоянно билдить в ES5, не удобно=)


Часовой пояс GMT +3, время: 18:08.