將功能內容移至外部文件

我在HTML5畫布上使用kinetic.js。我創建了一個層的形狀像這樣：將功能內容移至外部文件

var layer = new Kinetic.Layer(); 
var tile = new Kinetic.Shape({ 
    sceneFunc: function(context) { 
    context.fillStyle="rgb(255,255,255)"; 
    context.beginPath(); 
    context.moveTo(256,197); 
    context.lineTo(177,241); 
    context.bezierCurveTo(172,237,167,232,162,228); 
    context.lineTo(0,100); 
    context.fill(); 
    } 
}); 
layer.add(tile);

現在我需要的sceneFunc內的所有內容移動到外部文件。這些文件中會有很多不同形狀的文件。然後我需要能夠加載外部文件並執行sceneFunc中的代碼。如：

var layer = new Kinetic.Layer(); 
var tile = new Kinetic.Shape({ 
    sceneFunc: function(context) { 
    //call and execute shape code here 
    } 
}); 
layer.add(tile);

在一個單獨的文件下面的代碼：

context.fillStyle="rgb(255,255,255)"; 
context.beginPath(); 
context.moveTo(256,197); 
context.lineTo(177,241); 
context.bezierCurveTo(172,237,167,232,162,228); 
context.lineTo(0,100); 
context.fill();

是否有這樣做的一種方式？我知道我可以創建外部文件的腳本標記，但是它會執行sceneFunc函數之外的代碼。如果使用與XMLHttpRequest的ajax調用並與eval();

一起使用ajax調用也是如此：如何從外部文件讀取代碼，然後在正確的位置執行它？

來源

2014-05-10 Coop

你不能這樣做正是你想做什麼，但你可以做這樣的事情：

創建的形狀功能的陣列

var shapes=[];

然後在小文件有什麼像

shapes.push(function(context){ 
    context.fillStyle="rgb(255,255,255)"; 
    // shape drawing code here 
});

使用<script>標籤加載小文件數組聲明後，然後在sceneFunc這樣做

shapes.forEach(function(shape) { 
    shape(context); 
});

你就可以用XHR和eval（在這種情況下，你可以以編程方式添加「shapes.push」的東西，而不是讓它在小文件），但你需要異步調用的類似的東西僅在所有形狀加載時才創建形狀。

來源

2014-05-10 21:43:17 CupawnTae

有趣。如果可能的話，我一直在努力避免腳本標記的創建。你能用XHR和eval來展示你的其他建議嗎？使用eval是不安全的嗎？ – Coop

另外，當我使用JS創建腳本標記並將其附加到文檔頭時，shapes數組直到我要求查看它時才填充。所以我最終看着一個空的數組...... – Coop

是的，如果你是以編程方式注入腳本，你需要做一個類似的異步事件，或者也可以注入腳本，在*之後調用Kinetic.js *注入其他人。抱歉，現在沒有時間用XHR創建一個示例，但我想到的是使用XHR（或jquery或其他XHR包裝器）發起異步請求，記錄有多少個活動以及回調請求檢查它是否是最後一個，如果是的話調用Kinetic的東西。如果您完全控制了所有腳本，則在此情況下您可以執行eval。 – CupawnTae

將功能內容移至外部文件

回答

相關問題