Javascript 将函数内容移动到外部文件

我在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对其进行解析也是如此

---

如何从外部文件读取代码，然后在正确的位置执行它

你不能完全按照你想做的去做，但你可以这样做：

创建一个形状函数数组

var shapes=[];

然后在小文件中有如下内容

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

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

在数组声明之后使用标记加载小文件，然后在场景中执行以下操作

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

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

---

您可以使用XHR和eval执行类似的操作，在这种情况下，您可以通过编程方式添加shapes.push内容，而不是将其放在小文件中，但您需要仅在加载所有形状后异步调用形状创建。

。如果可能的话，我一直在努力避免创建脚本标记。您是否能够使用XHR和eval展示您的其他建议的示例？使用eval是否不安全？另外，当我使用JS创建脚本标记并将其附加到doc头时，shapes数组直到我请求查看之后才填充。因此，我最后看到的是一个空数组……是的，如果您以编程方式注入脚本，则需要执行类似的异步操作，或者在注入其他脚本之后，也可以注入调用Kinetic.js的脚本。很抱歉，我现在没有时间创建一个使用XHR的示例，但我想到的是使用XHR或jquery或其他XHR包装器启动异步请求，跟踪有多少处于活动状态，并在请求的回调中检查它是否是最后一个，如果是，则调用Dynamics。如果您完全控制了所有脚本（在本例中就是这样），那么eval是安全的。