Вопрос по синтаксису в объектах
Решил начать пользоваться объектами в 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();
})
|
когда срабатывает событие, то выполняется функция в контексте window, вам тогда надо прописать как то так:
$("body").on('click','#arr_gen_tree .js_tree_folder', Arr_gen.prototype.tree_sel_elem.bind(this)); |
накидал рабочий пример
<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>
|
skrudjmakdak, не window, а элемента над которым уловлено событие.
|
Aetae,
да, сори |
этот обработчик работает -
$("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) - Не помогает. |
ну в принципе то я понял фишку с bind(this), Но есть вопрос -
в переменную this- передается текущий объект, а до этого там в ней был DOM элемет. Как можно передать в функцию DOM по которому кликнули и объект в контексте которого он исполняется? $(e.target) - не совсем подходит, т.к. берет элемент самый нижний при клике, не факт что на нем стоит обработчик. |
<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>
|
Цитата:
|
можно
|
| Часовой пояс GMT +3, время: 12:09. |