Communication between anonymous functions in JavaScript

Question

I could have collected all my code in one single file and put everything in an anonymous function but I was wondering if it was possible to separate them into separate files and let them communicate with each other. Here is an example. Since everything is in anonymous functions I have to use the window object to "get it out" so that the robot.html can access those objects. The problem occurs when the first file tries to access the second file via the method:

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

How should I solve this problem?

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

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

file 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>

The console outputs these errors:

Uncaught TypeError: Cannot set property 'setWall' of undefined maze.js:36 Uncaught ReferenceError: Maze is not defined

EDIT:

The errors occurred because of typos.

I'd look into using a module loader like RequireJS. – Ates Goral Apr 10 '15 at 16:18 — Ates Goral, Apr 10 '15 at 16:18

T.J. Crowder · Accepted Answer · 2015-04-10T16:45:10.683

2

There are two usual answers to this:

Use a single global variable which is an object, and make your "modules" objects referenced by properties on that object (or make your functions properties on that object)
Use an AMD library like RequireJS (this also involves a global — the RequireJS lib itself — but can be useful if your dependencies are at all complex)

For instance, #1 might look something like this:

mazespace.js:

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

    return MazeSpace;
})();

maze.js:

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

    return Maze;
})();

Then use Amazing.MazeSpace and Amazing.Maze.

edited Apr 10 '15 at 16:45

answered Apr 10 '15 at 16:20

T.J. Crowder

1,031,962
187
1,923
1,875

That's the dog's balls! ;) (http://stackoverflow.com/a/8774506/1236397, see also: http://goo.gl/ixMmzM) j/k – James Wilkins Apr 10 '15 at 16:56
Thanks! :D now I know what dog's balls means ^^ – Aiden Apr 10 '15 at 19:23

score 1 · Answer 2 · answered Apr 10 '15 at 16:28

1

Maybe a simpler solution could be fixing the typo in maze.js. instead of:

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

it should read:

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

you had an extra s at the end of prototype so the function is unknown at later calls (i also fixed spelling error on direction :)

answered Apr 10 '15 at 16:28

hexerei software

3,100
2
15
19

Thank you so much for those corrections! Very grateful for it. – Aiden Apr 10 '15 at 16:34

Communication between anonymous functions in JavaScript

2 Answers2