畫架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結構說明

回答

相關問題