1

我想在一个画布上使用更多的 Javascript 文件，但我无法连接它们。例如，我想编写一个包含所有函数的 Javascript 文件和另一个正在使用它们的 Javascript 文件。

给我一个指南，我怎样才能建立这种联系？

谢谢。

这是第一个 javascript 文件：

var canvas = null;
var ctx = null;

window.onload = function () {
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');

    line (100,100,300,300);
}

这是第二个文件：

function line (x1,y1,x2,y2) {
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
}

这是我的 html 文件：

<!DOCTYPE html>

<html>
<head>
    <title>Tutorialok</title>
    <script type="text/javascript" src="CanvasElement.js"></script>
    <script type="text/javascript" src="line.js"></script>
    <style>
        #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="800" height="600">
        Sorry your browser Does not support canvas element!
    </canvas>

</body>
</html>

第一个文件找不到第二个文件功能。

4

3 回答 3

0

通过Objects. 我不推荐所有函数都存在于一个文件中的模式，但这是您可以使用的想法。您必须在 file2.js 执行任何操作之前加载 file1.js。

// file1.js
window.namespace = window.namespace || {};

window.namespace.fns = {
    foo: function () {}
};

// file2.js
window.namespace.fns.foo();
于 2012-12-23T14:27:13.383 回答
0

如果您期望函数提升，我认为这不会在脚本文件之间起作用，因为每个文件都是独立评估的。在 CanvasElement.js 加载时切换脚本标签，以便行在范围内。

否则，全局命名空间将在链接脚本之间共享。

于 2012-12-23T14:54:46.157 回答
0

js文件1

var f1 = function(){};
var f2 = function(){}

js文件2

 var s1 = f1();
 var s2 = f2();

在 html 页面上使用它

<script src="path/jsFile1.js"></script>
<script src="path/jsFile2.js"></script>
于 2012-12-23T14:31:45.810 回答