Question

我想在一个画布上使用更多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);
}

这是secnond文件：

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>

第一个文件无法找到第二个文件的功能。

Answer 1

通过Objects使用命名空间。我不建议在一个文件中存在所有函数的模式，但这是您可以使用的一个想法。你必须在file2.js可以做任何事情之前加载file1.js。

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

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

// file2.js
window.namespace.fns.foo();

Answer 2

jsFile 1

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

jsFile2

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

在html页面上使用它

<script src="path/jsFile1.js"></script>
<script src="path/jsFile2.js"></script>

Answer 3

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

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

如何包含多个Javascript文件？

3 个答案: