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 ;) |
<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, не получится, _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();
}
}
})();
|
Цитата:
Lemme, забудь ты об этих извращениях. Использую обычные конструкторы (для начала). Модули уже в ecma есть :) |
Rise, используется все=)
nerv_, забуду, но я не могу пока писать, не тестируя, а постоянно билдить в ES5, не удобно=) |
| Часовой пояс GMT +3, время: 14:37. |