Форум

vuler · #1 (**permalink**) 26.12.2014, 16:40

Решил начать пользоваться объектами в js, но хочется знать, корректный ли синтаксис использую.
Вот пример кода. Код в целом рабочий.
Тут зоздаю класс arr_gen в конструкторе запоминаю все DOM елементы с которыми буду работать и переменные. И запускаю обработчик событий например на клик по дереву.
Если срабатывает обработчик запускается метод Arr_gen.prototype.tree_sel_elem, а в нем вызваю другой метод Arr_gen.prototype.test того же класса.
Смущает следующее: в методе tree_sel_elem идет прямое обращение к tree_block не Arr_gen.tree_block или что-то подобное не получится ли конфликт имен, если будет еще одна переменная tree_block в методе?
Функция тест из метода запускается Arr_gen.prototype.test(); ее короче никак нельзя записать? или это такой синтаксис. И по записе Arr_gen.tree_se -тоже корректно?

function Arr_gen() {
	this.tree_block=$('#arr_gen_tree');
	this.last_id=this.tree_block.attr('last_id');
	shape_block=$('#arr_gen_shapes');
	this.shape_line=shape_block.find('.arr_gen_inp_line');
	this.shape_arr_but=shape_block.find('.arr_gen_arr_but');
	
	$("body").on('click','#arr_gen_tree .js_tree_folder', Arr_gen.prototype.tree_sel_elem);
	
} 

Arr_gen.prototype.test=function(){
	Arr_gen.tree_se.remove();
	alert('test');
}


Arr_gen.prototype.tree_sel_elem = function(){
	if ($(this).hasClass('selected')) return;
	Arr_gen.tree_se=$(this).closest('li');
	tree_block.find('.js_tree_folder.selected').removeClass('selected');
	$(this).addClass('selected');
	Arr_gen.prototype.test();
};

$(document).ready(function() {

var arr_gen=new Arr_gen();

})

skrudjmakdak · #2 (**permalink**) 26.12.2014, 16:52

когда срабатывает событие, то выполняется функция в контексте window, вам тогда надо прописать как то так:
$("body").on('click','#arr_gen_tree .js_tree_folder', Arr_gen.prototype.tree_sel_elem.bind(this));

skrudjmakdak · #3 (**permalink**) 26.12.2014, 16:58

накидал рабочий пример

<html>
	<head>
	</head>
    <body><div>123123</div></body>
	
			<script>
function Cl (selector) {
	this.obj = document.querySelector(selector);
	this.obj.onclick = Cl.prototype.method.bind(this);
}

Cl.prototype.method = function (e) {
	console.log(e);
	console.log(this);
}

var obj = new Cl('div');
		</script>
</html>

Aetae · #4 (**permalink**) 26.12.2014, 17:21

skrudjmakdak, не window, а элемента над которым уловлено событие.

skrudjmakdak · #5 (**permalink**) 26.12.2014, 17:34

Aetae,
да, сори

vuler · #6 (**permalink**) 27.12.2014, 11:59

этот обработчик работает -
$("body").on('click','#arr_gen_tree .js_tree_folder', Arr_gen.prototype.tree_sel_elem);
Если сделать так -
$("#arr_gen_tree").on('click','.js_tree_folder', Ag.prototype.tree_sel_elem), то tree_block - будет андефайнед.
Ag.prototype.tree_sel_elem.bind(this) - Не помогает.

vuler · #7 (**permalink**) 27.12.2014, 14:55

ну в принципе то я понял фишку с bind(this), Но есть вопрос -
в переменную this- передается текущий объект, а до этого там в ней был DOM элемет. Как можно передать в функцию DOM по которому кликнули и объект в контексте которого он исполняется? $(e.target) - не совсем подходит, т.к. берет элемент самый нижний при клике, не факт что на нем стоит обработчик.

skrudjmakdak · #8 (**permalink**) 29.12.2014, 11:47

<html>
	<head>
	</head>
    <body>
		<div>123123</div>
		<div>123123</div>
	</body>
	
			<script>
function Cl (obj, color1, color2) {
	this.color1 = color1;
	this.color2 = color2;
	this.obj = obj;
	obj.style.backgroundColor = color1;
	this.obj.onclick = Cl.prototype.method.bind(this.obj, this);
}

Cl.prototype.method = function (obj, e) {
	console.log(obj);
	console.log(e);
	console.log(this);
	
	this.style.backgroundColor = this.style.backgroundColor == obj.color2 ? obj.color1 : obj.color2;
}

var divs = document.querySelectorAll('div'),
	div1 = divs[0],
	div2 = divs[1];

var obj1 = new Cl(div1, 'red', 'yellow');
var obj2 = new Cl(div2, 'white', 'green');
		</script>
</html>

danik.js · #9 (**permalink**) 29.12.2014, 13:25

Сообщение от skrudjmakdak

this.obj.onclick = Cl.prototype.method.bind(this.obj, this)

Нафига, если можно писать this.method.bind...?

skrudjmakdak · #10 (**permalink**) 29.12.2014, 13:46

можно

Форум

Справочник

Discord чат

Курсы javascript