如何在外部js文件中使用库？

Question

我试图将我的对象写在一个单独的js文件中，以使我的主要HTML文件更易于组织。 当我使用jquery或oCanvas（画布库）语法时，它似乎无法识别并且无法执行。 我希望能够为我的主体创建对象模板，以从中创建克隆（使用oCanvas中的clone（）函数）。

主HTML

<script language="javascript" type="text/javascript">
    var canvas = oCanvas.create({
        canvas: "#myCanvas",
        background: "#CCCCCC"
    });
    helloworld();

</script>

外部JS文件

var rectangle = canvas.display.rectangle({
    x: 77,
    y: 77,
    width: 200,
    height: 100,
    fill: "#0aa"
});

function helloworld(){
    alert(rectangle.x);
};

当我调用对象rectangle并警告它的x属性时，它会失败。 这与使对象成为全局对象有关吗？

Answer 1

由于helloworld位于封闭中，因此您需要将其导出到外部作用域以在其他地方使用它：

$(document).ready(function(){

var rectangle = canvas.display.rectangle({
    x: 77,
    y: 77,
    width: 200,
    height: 100,
    fill: "#0aa"
});

function helloworld(){
    alert(rectangle.x);
};

window.helloworld = helloworld; // make it global

});

但是，您粘贴的脚本会立即调用该函数，直到该脚本运行后才会对其进行定义。 因此，您必须等到DOM加载后才能调用helloworld() 。

Answer 2

删除$(document).ready(function(){和}); 以来：

• 通过在另一个函数中定义它， helloworld不是全局的，因此您无法从其他脚本元素访问它， 并且
• 直到DOM ready事件触发（在您尝试调用helloworld之后）， rectangle才会被赋值。

---

编辑问题后

这是您的代码执行顺序：

1. 在画布上调用一个函数，并将值分配给rectangle
2. 创建画布
3. 呼叫helloworld尝试从rectangle读取值

您必须先创建画布，然后再尝试从中读取数据。

Answer 3

方式之一：

您应该触发自定义事件：

$(document).ready(function(){
  ...
  window.hello = function(name){alert('Hello, '+name+'!');}
  // document.dispatchEvent(new CustomEvent('libLoaded', { name: 'hello' }));
  document.dispatchEvent(new CustomEvent('libLoaded_hello', {}));
  ...
});  

然后等待：

document.addEventListener('libLoaded_hello', function(e){
  // console.log(e.name);
  hello('World');
});