KineticJS - オブジェクトとファイルを分割する方法

Question

私と私の大学のグループは、KineticJSを使ってWeb上でゲームを開発しています。表示されている、削除され、いくつかのactionEventsを持つ形状を使用しています。

今、私たちは非常に遠くに得られていないが、私はまだファイルが非常に大きくなっているのを感じる。すべてのファイルをより小さなファイルに分割する方法のためのヒントはありますか？すべてのオブジェクトを1つのファイルに保存することは可能ですか、別のファイルにActionVentsを実行するだけですか？ワークフローがどのように見えるかのようなヒントは歓迎されています！

Answer 1

ヒント：ファクトリモデルを使用して、速度論文を定義して作成します。

これは、約50行のJavaScriptで必要なものと同じくらい多くのサークルを構築することができるデモです。

http://jsfiddle.net/m1erikson/s89mu/

工場モデルについて

まず、単一の固有の円を定義するすべてのプロパティを保持するJSオブジェクトを作成します。

この正確な円をどのように構築するかの青写真として考えることができます。

実際のキネチック.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();
}

.