画架JavaScript结构说明

我发现了一个可以使CANVAS更容易工作的API。它允许非常容易地选择和修改画布上的各个元素。这是EaselJS。 API文档在这里。 http://easeljs.com/docs/画架JavaScript结构说明

到目前为止，我对这个API还不错。令我困惑的是其中的一些javascript。粗体或* *内的部分（无法获得格式化）这是什么样的JavaScript结构？

（函数（目标）{...的内容...}）（位图）和内容，它引用位，这也是之外的东西。

这里是代码

for(var i = 0; i < 100; i++){ 
    bitmap = new Bitmap(image); 
    container.addChild(bitmap); 
    bitmap.x = canvas.width * Math.random()|0; 
    bitmap.y = canvas.height * Math.random()|0; 
    bitmap.rotation = 360 * Math.random()|0; 
    bitmap.regX = bitmap.image.width/2|0; 
    bitmap.regY = bitmap.image.height/2|0; 
    bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random()*0.4+0.6; 
    bitmap.mouseEnabled = true; 
    bitmap.name = "bmp_"+i;

（功能（目标）{

* bitmap.onPress =函数（EVT）*

 {if (window.console && console.log) { console.log("press!"); } 
     target.scaleX = target.scaleY = target.scale*1.2; 
     container.addChild(target); 
     // update the stage while we drag this target 
     //Ticker provides a central heartbeat for stage to listen to 
     //At each beat, stage.tick is called and the display list re-rendered 
     Ticker.addListener(stage); 
     var offset = {x:target.x-evt.stageX, y:target.y-evt.stageY}; 

     evt.onMouseMove = function(ev) { 
      target.x = ev.stageX+offset.x; 
      target.y = ev.stageY+offset.y; 
      if (window.console && console.log) { console.log("move!"); } 
     } 
     evt.onMouseUp = function() { 
      target.scaleX = target.scaleY = target.scale; 
      // update the stage one last time to render the scale change, then stop updating: 
      stage.update(); 
      Ticker.removeListener(stage); 
      if (window.console && console.log) { console.log("up!"); } 
     }

**}}）（bitmap）; **

bitmap.onClick = function() { if (window.console && console.log) { console.log("click!"); } } 
}

来源

2011-06-15 William Sham

我已经通过他们的代码至少50次，仍然有理解他们的一些代码的问题。如果你是一个新手中间程序员，它可能很难破译。 – puk 2011-12-06 21:15:46

(function(target){...content...})(bitmap)

正在为内容的词汇范围，以任何var或function声明内容不泄漏到了全球范围。内容中，target只是 bitmap的另一个名称。

你可以认为这是类似的，以

function init(target) { ...content... }

，然后把它传递bitmap作为target参数但第一个版本的实际值立即呼叫与全球范围内甚至更少干扰 - 它没有将全球范围内的名称定义为init。

编辑：我认为目的不是词法作用域，而是确保事件处理程序指向正确的位图，而不是for循环处理的最后一个位图。 init（bitmap）;

查看Event handlers inside a Javascript loop - need a closure?了解更多详情。

来源

2011-06-15 20:57:51

如果目标是位图的另一个名称当它在函数内部时......在函数的第一行中，它们使用bitmap.onPress = function（evt） – 2011-06-15 21:03:12

@William Sham，它看起来像一个事件处理函数定义。 http://www.quirksmode.org/js/introevents.html – 2011-06-15 21:19:27

我明白这是一个事件处理程序。但为什么bitmap.onPress而不是target.onPress ...我试了两个表面上，似乎都工作..只是不知道是否有其他影响 – 2011-06-15 21:22:59

画架JavaScript结构说明

回答

相关问题