Форум

diman91 · #1 (**permalink**) 08.01.2014, 12:05

Всем привет!
Такой вопрос:
Вещаю на элемент атрибут data-click="myFunction"
Как средствами js распарсить все это дело и навещать обработчик?
Не ударить ли это на производительнось?
Если допустим у меня интерфейс без перезагрузки и эти элементы динамически то создаются то удаляются (например модальные окна) не начнет ли компьютер дико орать и грется (утечка памяти и все такое) после продолжительной работы с интерфейсом?

animhotep · #2 (**permalink**) 08.01.2014, 12:34

тоесть стандартный onclick не устраивает?
конечно же свой велосипед ударит на производительность

diman91 · #3 (**permalink**) 08.01.2014, 12:43

Стандартный нет, например через стандартный у меня будет выглядит примерно так onclick="new AppMenu().create()"
хочу чтобы было так data-click="app_menu.create"
да и еще использую кастомный я смогу подхватывать а не создавать снова и снова через new

cyber · #4 (**permalink**) 08.01.2014, 19:44

diman91, а что мешает сделать так

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <div id="click">  click </div>
    
    <script>
     
      
      var elem = document.getElementById("click"),
          app = new App();
      
     
      elem.onclick = function () {
      
        this.innerHTML = app.getRandom();
               
      }
      
      
      
      function App() {
      
        this.getRandom = function () {
         
          return Math.random().toString().slice(2);
        }
      }




    </script>

  </body>
</html>

diman91 · #5 (**permalink**) 08.01.2014, 20:19

Сделать так конечно можно, только вот у меня в интерфейсе все управляющие элементы подгружаются динамически, и каждый раз навешивать обработчик нехочится, да еще и id присваивать.

cyber · #6 (**permalink**) 08.01.2014, 20:33

diman91, а зачем каждый раз навешивать ? Почитайте
http://learn.javascript.ru/bubbling-and-capturing

diman91 · #7 (**permalink**) 08.01.2014, 20:49

cyber,Вы не совсем поняли, приведу пример, открываем грид в строке видим управляющие элементы например жмакаем "Редактировать" открывается модальное окно со сложной формой, в ней куча функционала, и допустим 25 элементов которые запускают разные функции, причем функции могут быть не просто разные но и от разных модулей.

diman91 · #8 (**permalink**) 08.01.2014, 21:05

Приведу пример модуля

var AppMenu = (function () {
    var _self;
    var _protectFn;

    function AppMenu() {
        _self = this;
    }

    AppMenu.prototype = {
        changeStatus:function(status){
            var elements = _protectFn.getCheckedElements();
            var data = {"req":"changeStatus","status":status,"elements":elements};
            if (elements.length>0) {
                if (confirm("Вы уверены что хотите изменить статус у "+elements.length+" объектов?")) {
                    new ajaxSender({
                        url:'/office/appMenu/status',
                        data:data,
                        success: function(answer){
                            _protectFn.afterChangeStatus(answer);       
                        } 
                    }).send();
                }    
            }
        }
        //и так далее публичные методы
    }

    _protectFn = {
        getCheckedElements:function(){
            var els = [];
            $(".checks").each(function(){
                if ($(this).is(':checked')) {
                    els[els.length] = $(this).attr("data-el");
                }
            });
            return els;
        },
        afterDelete:function(answer){
            //
        }
        //и так далее защишеные методы
    }

    return AppMenu;
})();

Бывает так что надо чтобы элемент создавал новый экземпляр, иногда нужно запустить метод в уже созданном экземпляре. Поэтому вещать на элементы onclick="new blablabla" не всегда подходит. А награмождать лишний код тоже неохото.

cyber · #9 (**permalink**) 08.01.2014, 21:13

diman91,

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>

    <div id="container">
    
      <div data-method-click="positive" > click and get positive number</div>
    
      <div data-method-click="negative"> click and get positive negative</div>
      
    </div>
    
    
    <script>
      
      var cont = document.getElementById("container"),
          app = new App,
          handlers = {
            positive: app.getPositive,
            negative: app.getNegative
          
          };
      
      cont.addEventListener("click", onContainerClick);
      
      function onContainerClick (e) {
        
        var val = e.target.getAttribute("data-method-click");
      
        if(val && handlers[val]){ 
          
          e.target.innerHTML = handlers[val]();
         
        } 
      
      }
      
      
      
      function App() {
        
        this.getPositive = function () {
        
          return Math.random().toString().slice(2);
        };
        
        this.getNegative = function () {
        
          return "-" + Math.random().toString().slice(2);
        };
      
      
      
      }

    </script>

  </body>
</html>

diman91 · #10 (**permalink**) 08.01.2014, 22:01

cyber,Возможно Вы гдето близко от той реализации которую я хочу

Что если повесить обработчик на боди

document.body.addEventListener("click", onBodyClick);
function onBodyClick(e){
	var data_click = e.target.getAttribute("data-click");
	if(data_click){
		//
	}
}

Форум

Справочник

Discord чат

Курсы javascript