Блог

Я просматриваю книгу Никласа Закаса. Я занимаюсь пользовательскими событиями и в настоящее время просматриваю этот код:

 var DragDrop = function(){

        var dragdrop = new EventTarget(),
            dragging = null,
            diffX = 0,
            diffY = 0;

        function handleEvent(event){

            //get event and target
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);            

            //determine the type of event
            switch(event.type){
                case "mousedown":
                    if (target.className.indexOf("draggable") > -1){
                        dragging = target;
                        diffX = event.clientX - target.offsetLeft;
                        diffY = event.clientY - target.offsetTop;
                        dragdrop.fire({type:"dragstart", target: dragging, x: event.clientX, y: event.clientY});
                    }                     
                    break;

                case "mousemove":
                    if (dragging !== null){

                        //assign location
                        dragging.style.left = (event.clientX - diffX)   "px";
                        dragging.style.top = (event.clientY - diffY)   "px";   

                        //fire custom event
                        dragdrop.fire({type:"drag", target: dragging, x: event.clientX, y: event.clientY});
                    }                    
                    break;

                case "mouseup":
                    dragdrop.fire({type:"dragend", target: dragging, x: event.clientX, y: event.clientY});
                    dragging = null;
                    break;
            }
        };

        //public interface
        dragdrop.enable = function(){
                EventUtil.addHandler(document, "mousedown", handleEvent);
                EventUtil.addHandler(document, "mousemove", handleEvent);
                EventUtil.addHandler(document, "mouseup", handleEvent);
        };

        dragdrop.disable = function(){
                EventUtil.removeHandler(document, "mousedown", handleEvent);
                EventUtil.removeHandler(document, "mousemove", handleEvent);
                EventUtil.removeHandler(document, "mouseup", handleEvent);
        };

        return dragdrop;
    }();

    DragDrop.enable();

    DragDrop.addHandler("dragstart", function(event){
        var status = document.getElementById("status");
        status.innerHTML = "Started dragging "   event.target.id;
    });

    DragDrop.addHandler("drag", function(event){
        var status = document.getElementById("status");
        status.innerHTML  = "<br>Dragged "   event.target.id   " to ("   event.x   ","   event.y   ")";
    });

    DragDrop.addHandler("dragend", function(event){
        var status = document.getElementById("status");
        status.innerHTML  = "<br>Dropped "   event.target.id   " at ("   event.x   ","   event.y   ")";
    });
  

Мой вопрос касается вызова функции DragDrop.enable();

Я не понимаю, как мы можем вызвать функцию включения, которая определяется не непосредственно в DragDrop, а в dragdrop bject (определяется вверху внутри DragDrop).

Спасибо за любое предложение или указание на какое-либо чтение..

Код использует немедленно вызываемое функциональное выражение (IIFE) для настройки некоторых переменных, содержащихся в замыкании.

В начале назначения:

 var DragDrop = function(){
  

большинство записало бы это как:

 var DragDrop = (function(){
  

где дополнительный «(» дает понять, что будет выполнено выражение функции и назначен результат, а не сама функция.

Здесь создается объект перетаскивания:

     var dragdrop = new EventTarget(),
  

и свойства, назначенные здесь:

     //public interface
    dragdrop.enable = function(){
      ...
    };

    dragdrop.disable = function(){
      ...
    };
  

затем здесь возвращается объект, который будет назначен DragDrop (и на который в настоящее время ссылается dragdrop):

     return dragdrop;
  

И, наконец, пустой список параметров вызывает исключение выражения функции:

 }();
  

что чаще всего записывается:

 }());
  

чтобы сбалансировать дополнительные «(«, предложенные ранее. Итак, DragDrop теперь ссылается на возвращаемый объект (экземпляр EventTarget), который имеет доступ ко всем переменным, созданным в IIFE (например, drag, diffX, diffY), но другие функции этого не делают.

Переменной DrapDrop присваивается объект dragdrop (из-за оператора return), который имеет свойство enable()

Итак, чтобы вызвать enable, просто перетащите drop.enable()