blocks|key|2375977|text|由于helloworld处于闭包状态，因此需要将其导出到外部作用域以在其他地方使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2375978|$(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

});|code-block|syntax|javascript|2375979|但是，您粘贴的脚本会立即调用函数，在运行之后才会定义它。因此，您必须等到DOM加载后才调用helloworld()。|2375980|entityMap^0|2|A|0|0|19|C|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Because <code>helloworld</code> is in a closure, you'll need to export it to an outer scope to use it somewhere else:

<pre><code>$(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

});
</code></pre>

However, the script you pasted calls the function immediately, and it won't be defined until after this runs. So you'd have to wait until the DOM is loaded before calling <code>helloworld()</code>.

blocks|key|2801747|text|删除$(document).ready(function(){和});，因为：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2801748|通过在另一个函数中定义它，helloworld不是全局的，因此您无法从其他脚本元素和|unordered-list-item|2801749|在触发DOM之前，不会给rectangle一个值(在尝试调用helloworld之后)。|2801750|2801751|2801752|2801753|在编辑问题之后|2801754|这是您的代码执行顺序：|2801755|调用画布上的函数并将值赋值给rectangle|ordered-list-item|2801756|创建画布|2801757|调用helloworld，它尝试从rectangle读取一个值|2801758|2801759|2801760|在尝试从画布中读取数据之前，必须先创建画布。|2801761|entityMap^0|2|T|W|3|0|D|A|0|C|9|U|A|0|0|0|0|0|0|E|9|0|0|2|A|H|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|I|3|J|5|H|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1K|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1L|8|@]|D|@]|E|$]]|$1|R|3|S|5|T|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|U|3|V|5|T|7|1P|8|@]|D|@]|E|$]]|$1|W|3|X|5|T|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|1X|8|@]|D|@]|E|$]]|$1|12|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|13|$]]

Remove <code>$(document).ready(function(){</code> and <code>});</code> since:

<ul>
<li>By defining it inside another function, <code>helloworld</code> is not a global so you can't reach it from your other script element and</li>
<li><code>rectangle</code> won't be given a value until the DOM ready event has fired (which will be after your attempt to call <code>helloworld</code>. </li>
</ul>

<hr>

After the edit to the question

This is your order of code execution:

<ol>
<li>Call a function on the canvas and assign the value to <code>rectangle</code></li>
<li>Create the canvas</li>
<li>Call <code>helloworld</code> which tries to read a value from <code>rectangle</code></li>
</ol>

You have to create the canvas before you try to read data from it.

blocks|key|2376018|text|其中一种方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2376019|您应该触发自定义事件：|2376020|$(document).ready(function(){
++...
++window.hello+=+function(name){alert('Hello,+'%2Bname%2B'!');}
++//+document.dispatchEvent(new+CustomEvent('libLoaded',+{+name:+'hello'+}));
++document.dispatchEvent(new+CustomEvent('libLoaded_hello',+{}));
++...
});++|code-block|syntax|javascript|2376021|等一等：|2376022|document.addEventListener('libLoaded_hello',+function(e){
++//+console.log(e.name);
++hello('World');
});|2376023|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

One of ways:

You should trigger your custom events:

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

And wait it:

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

I am trying to write my objects in a separate js file to make my main HTML file easier to organise. When I use jquery or oCanvas (canvas library) syntax, it doesn't seem to recognise it and fails to execute. I want to be able to make object templates for my main to make clones from (using the clone() function in oCanvas).

Main HTML

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

&lt;/script&gt;
</code></pre>

External JS File

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

function helloworld(){
 alert(rectangle.x);
};
</code></pre>

When I call for the object <code>rectangle</code> and alert it's x property it fails. Is this something to do with making the object global?

How can I use libraries in external js files?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正试图在一个单独的js文件中编写我的对象，以使我的主HTML文件更易于组织。当我使用jquery或oCanvas (画布库)语法时，它似乎没有识别它，并且无法执行。我希望能够为我的主板制作对象模板(使用oCanvas中的克隆()函数)。主HTML<script language="javascript" type="...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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