KineticJS - 如何拆分物體和文件

Question

我和我大學的一個團隊正在使用KineticJS在網絡上開發一款遊戲。我們正在使用顯示，刪除和幾個actionevents的形狀。

現在我們還沒有走得很遠，但我仍然覺得檔案越來越大。你有關於如何將所有內容分成小文件的提示嗎？是否有可能將所有對象存儲在一個文件中，並在另一個文件中執行actionevents？歡迎任何提示，瞭解工作流程應該是什麼樣子！

Answer 1

提示：使用工廠模式來定義和創建動力學對象

這裏有一個演示，讓使用一個工廠，你在大約50行JavaScript代碼的需要建立儘可能多的圈：

http://jsfiddle.net/m1erickson/s89Mu/

關於工廠模式

首先，創建一個保存人一個JS對象l定義單個唯一圓的屬性。

您可以將此視爲如何構建此確切圈子的藍圖。

實際的Kinetic.Circle將在稍後使用myCircleDefinition5進行構建，並將添加到圖層中。

性能註釋：您可以使用JSON來保存此值，以將myCircleDefinition5保存到文件或數據庫中。

就像不引人注意的JavaScript一樣，您的數據定義與您的代碼保持分離，以實現更簡潔的代碼。

// create the definition of a circle -- not yet an actual circle 

var myCircleDefinition5={ 
    cx: 150, 
    cy: 100, 
    radius: 20, 
    fill: "blue", 
    strokewidth: 4 
} 

下面是一個使用myCircleDefinition5添加的層上的真實動力學圓的代碼：

// turn the object into a real Kinetic.Circle 

makeCircle(myCircleDefinition5); 

// this is the "factory" that takes a definition and produces a real Kinetic.Circle 

function makeCircle(circleObject){ 
    var circle = new Kinetic.Circle({ 
     x:circleObject.cx, 
     y:circleObject.cy, 
     radius: circleObject.radius, 
     fill: circleObject.fill, 
     stroke: 'lightgray', 
     strokeWidth: circleObject.strokewidth, 
     draggable: true 
    }); 
    layer.add(circle); 
    layer.draw(); 
}