如何包含多个JavaScript文件？

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);
}

这是第二个文件：

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使用命名空间。 我不建议所有文件都存在一个文件中的模式，但这是您可以使用的想法。 您必须先加载file1.js，然后file2.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加载时行在范围内。

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

如何包含多个JavaScript文件？

问题描述

3 个解决方案

解决方案1
0 2012-12-23 14:27:13

解决方案2
0 2012-12-23 14:31:45

解决方案3
0 2012-12-23 14:54:46

如何包含多个JavaScript文件？

问题描述

3 个解决方案

解决方案1 0 2012-12-23 14:27:13

解决方案2 0 2012-12-23 14:31:45

解决方案3 0 2012-12-23 14:54:46

解决方案1
0 2012-12-23 14:27:13

解决方案2
0 2012-12-23 14:31:45

解决方案3
0 2012-12-23 14:54:46