Вопрос по синтаксису в объектах
Решил начать пользоваться объектами в 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, время: 02:44. |