Пожалуйста, объясните этот фрагмент кода

Question

Я сталкивался с этим кодом, когда просматривал примеры HTML5 canvas.Я вставил код и дал комментарий в том месте, где у меня есть сомнения.

if(window.addEventListener) {

  window.addEventListener('load', function () {
  var canvas, context, tool;

  function init () {
    canvas = document.getElementById('imageView');
    if (!canvas) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvas.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

     context = canvas.getContext('2d');
    if (!context) {
      alert('Error: failed to getContext!');
      return;
    }

        tool = new tool_pencil();

    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
  }

   function tool_pencil () {
    var tool = this;
    this.started = false;


    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };

      this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
      }
    };

       this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }

    function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { 
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { 
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    //Please explain the follwing set of line
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

  init();

}, false); }

Answer 1

В сочетании с другими ответами он помещает все обратные вызовы в один объект. В результате func равно tool.onmousedown, tool.onmouseup и т. Д.

Answer 2

//Please explain the follwing set of line
var func = tool[ev.type]; // Set func to the tool object's member 
                          // named 'event.type' 
                          // Will set func to undefined if no function is 
                          // found in the tool object
if (func) {  // if a func was found then call it.
  func(ev);
}

Обратите внимание, что хеш-объект tool используется для хранения ссылок на функции, а не скаляров, таких как 1, «строка» и т. Д. Особенность Javascript заключается в том, что вы можете создавать, сохранять и передавать функции ввремя выполнения.

Добавлено Спасибо @Chris Morgan за указание на то, что an_obj ['unknown_key'] == не определено, а не равно нулю.

Также обратите внимание, что foo ['a_key'] - это способ сказать foo.a_key - член 'a_key' объекта 'foo'.

И, наконец, Javascript не делаетесть хэшиВ нем есть объекты, которые работают достаточно хорошо, как и тип Hash, встречающийся в других языках.

Добавлен еще (после просмотра всего кода, а не только рассматриваемой части).Код создает объект tool.Он имеет несколько членов:

• started flag
• mousedown, mouseup и mousemove функций

ФрагментКод пытается найти функцию, которая соответствует типу события.Таким образом, в этом случае объект tool используется как объект, а не как хеш.Я обновил первую часть ответа соответствующим образом.

Answer 3

Похоже, что он пытается присвоить «инструмент» типа ev.type переменной func.Это должно быть функцией.Затем он проверяет, существует ли функция (т.е. была ли она назначена или нет), и вызывает ее, если она существует, передавая переменную ev в качестве параметра.