Question

我试图在一个单独的js文件中编写我的对象，以使我的主HTML文件更容易组织。当我使用jquery或oCanvas（画布库）语法时，它似乎无法识别它并且无法执行。我希望能够为我的main制作对象模板来制作克隆（使用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

});

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

Answer 2

删除$(document).ready(function(){和});，因为：

通过在另一个函数中定义它，helloworld不是全局的，因此您无法通过其他脚本元素和
rectangle在DOM就绪事件被触发之前（在您尝试拨打helloworld之后）将无法获得值。

编辑问题后

这是您执行代码的顺序：

在画布上调用一个函数，并将值赋给rectangle
创建画布
致电尝试从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');
});

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

3 个答案: