Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.08.2015, 03:51
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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 в 04:18.
Ответить с цитированием
  #2 (permalink)  
Старый 20.08.2015, 10:57
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Lemme, пример использования приведи для чего это надо, так не понятно что ты хочешь.
Ответить с цитированием
  #3 (permalink)  
Старый 20.08.2015, 15:46
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

<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');


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

Последний раз редактировалось Lemme, 20.08.2015 в 15:59.
Ответить с цитированием
  #4 (permalink)  
Старый 20.08.2015, 16:24
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

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();
        }
    }
})();

Последний раз редактировалось Rise, 20.08.2015 в 16:28.
Ответить с цитированием
  #5 (permalink)  
Старый 20.08.2015, 16:54
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Lemme, _container для чего не используется же?
Ответить с цитированием
  #6 (permalink)  
Старый 20.08.2015, 16:58
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Rise
_controller для чего?
чтобы контролировать!

Lemme, забудь ты об этих извращениях. Использую обычные конструкторы (для начала). Модули уже в ecma есть
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #7 (permalink)  
Старый 20.08.2015, 17:07
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли передать переменную ajax'om ? Vladislav Общие вопросы Javascript 2 18.02.2013 06:34
Не могу передать переменную frundik AJAX и COMET 17 23.05.2012 18:31
Не могу передать переменную frundik Общие вопросы Javascript 1 23.05.2012 12:38
ThickBox передать переменную в iframe 4e4en Events/DOM/Window 1 05.10.2011 21:44
$.ajax-как передать переменную в данных Dimaz jQuery 1 15.02.2010 16:00