代码之家 › 专栏 › 技术社区 › karthick

请解释此代码段

html5 javascript

3

karthick · 技术社区 · 14 年前

我在浏览html5画布示例时遇到了这段代码。

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); }

3 回复 | 直到 14 年前

1

3

Chris Morgan 14 年前

结合其他答案,它所做的是将所有回调放在一个对象中。结果是 func 是 tool.onmousedown , tool.onmouseup 等等。

2

1

Larry K 14 年前

//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 hash对象用于保存函数引用,而不是1、“字符串”等标量。Javascript的一个特性是可以在运行时创建、保存和传递函数。

感谢@Chris Morgan指出a_obj['unknown_key']==未定义,不为空。

还要注意foo['a_key']是表示foo.a_key的运行时方式——对象'foo'的'a_key'成员。

最后,Javascript没有散列。它具有工作正常的对象以及在其他语言中找到的哈希类型。

(在看了所有的代码之后,不仅仅是问题部分)。代码正在创建一个对象 工具

started 旗帜
mousedown , mouseup mousemove 功能

代码片段正在尝试定位与事件类型匹配的函数。所以在这种情况下被用作对象,而不是散列。我已经适当地更新了答案的第一部分。

3

0

Richard Marskell - Drackir Sunil Tandon 14 年前

看起来它在试图分配一个“工具”类型 ev.type 到变量 func . 这应该是一个函数。然后检查函数是否存在(例如,如果它被分配或没有)并调用它,如果它确实,通过 ev 变量作为参数。