Question

我本可以在一个文件中收集所有代码并将所有内容放在一个匿名函数中，但我想知道是否可以将它们分成单独的文件并让它们相互通信。这是一个例子。由于一切都在匿名函数中，我必须使用窗口对象“将其取出”，以便robot.html可以访问这些对象。当第一个文件尝试通过以下方法访问第二个文件时，会出现此问题：

Maze.prototype.setWall = function (x, y, direciton) {
    this.spaces[x][y].setWall(direciton);
};

我该如何解决这个问题？

文件1：maze.js

(function (window) {
    'use strict';

    function Maze (width, height) {
        this.width = width;
        this.height = height;

        this.startX             = null;
        this.startY             = null;
        this.startOrientation   = null;
        this.endX               = null;
        this.endY               = null;

        this.spaces = [];

        var x, y;
        for (x = 1; x <= width; x += 1) {
            this.spaces[x] = [];
            for (y = 1; y <= height; y += 1) {
                this.spaces[x][y] = new MazeSpace();
            }
        }
    }

    Maze.prototype.setStart = function (x, y, orientation) {
        this.startX = x;
        this.startY = y;
        this.startOrientation = orientation;
    };

    Maze.prototype.setEnd = function (x, y) {
        this.endX = x;
        this.endY = y;
    };

    Maze.prototypes.setWall = function (x, y, direciton) {
        this.spaces[x][y].setWall(direciton);
    };

    window.Maze = Maze;

})(window);

文件2：mazespace.js

(function (window) {
    'use strict';

    function MazeSpace () {
        this.north = false;
        this.east = false;
        this.south = false;
        this.west = false;
    }

    MazeSpace.prototype.setWall = function (direction) {
        this[direction] = true;
    };

    window.MazeSpace = MazeSpace;

})(window);

文件3：robot.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oojs</title>

    <script type="text/javascript" src="maze.js"></script>
    <script type="text/javascript" src="mazespace.js"></script>

    <script>
        var m = new Maze(7, 5);
        m.setStart(1, 1, 'north');
        m.setEnd(7, 1);
        m.setWall(1, 1, 'east');
    </script>

</head>
<body>
</body>
</html>

控制台输出以下错误：

未捕获的TypeError：无法设置未定义的maze.js属性'setWall：36 未捕获的ReferenceError：未定义迷宫

编辑：

由于拼写错误而发生错误。

Answer 1

通常有两个答案：

使用单个全局变量作为对象，并使该对象上的属性引用“模块”对象（或在该对象上创建函数属性）
使用像RequireJS这样的AMD库（这也涉及全局 - RequireJS lib本身 - 但如果您的依赖关系非常复杂，则可能很有用）

例如，＃1看起来像这样：

mazespace.js：

var Amazing = Amazing || {};
Amazing.MazeSpace = (function() {
    // ...

    return MazeSpace;
})();

maze.js：

var Amazing = Amazing || {};
Amazing.Maze = (function() {
    // ...

    return Maze;
})();

然后使用Amazing.MazeSpace和Amazing.Maze。

Answer 2

也许一个更简单的解决方案可以修复maze.js中的拼写错误。而不是：

Maze.prototypes.setWall = function (x, y, direciton) {
    this.spaces[x][y].setWall(direciton);
};

应该是：

Maze.prototype.setWall = function (x, y, direction) {
    this.spaces[x][y].setWall(direction);
};

你在prototype的末尾有一个额外的 s 所以这个函数在以后的调用中是未知的（我还修复了方向的拼写错误）< / p>

JavaScript中匿名函数之间的通信

2 个答案: