Learn JavaScript in Construct, part 12: Modules

15

Index

Attached Files

The following files have been attached to this tutorial:

.c3p

modules-template.c3p

Download now 47.07 KB
.c3p

imports-for-events.c3p

Download now 47.58 KB

Stats

8,074 visits, 18,800 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 10 Dec, 2021. Last updated 16 Dec, 2021

A few extra notes

Here are a few extra things about how modules work.

The main script

Construct itself will only load and run main.js. If you select the script file in the Project Bar, you'll see properties appear for it in the Properties Bar. These properties include the Purpose, which is set to Main script for main.js.

A project can only have one main script. All other scripts must be imported if they are to be loaded and used, as Construct won't load them automatically. (Notice the Purpose of mymodule.js is "none set".)

The main script is also highlighted in bold in the Project Bar so you can easily see which one is set as the main script.

Importing the same file repeatedly

If you have multiple files that all import mymodule.js, it still only loads and runs the script once. The first time will actually load it, and all subsequent times will just re-use the first one. This ensures modules work efficiently.

Imported name

Note that things exported from mymodule.js were imported to an object which we named MyModule. This avoids making them all global or top-level functions, which would have the various pitfalls mentioned previously. It keeps everything organised and means you can easily use two functions with the same name from two different modules.

In programming the term namespace refers to a location where names are used, such as the top level of a script file, or within an object like MyModule. Keeping things in different namespaces avoids problems like having two functions with the same name overwriting each other.

There are ways to import things to the top-level scope if you want to, or even importing them with a different name. But since you can write the import statements however you like, you are always in control of which names are used for everything you import.

Imports and exports are static

Exports can only appear at the top level of a script. You can't do things like export something inside an 'if' statement. This enforces that modules must always export the same set of things.

Import statements must appear at the top of a script before any other lines of code. This also means you can't use an import statement inside an 'if' statement (although a separate dynamic import feature exists for that use).

These rules are designed to allow tools to be able to do things like bundle and optimise code. It also helps keep things consistent and predictable.

Next Tutorial In Course

Learn JavaScript in Construct, part 13: Onwards 17:33

Learn where to go next, with lots more resources to explore, some final bits of advice, and closing remarks.

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • This clears so many confusions, still hope to see more tutorials on how to use the javascript and even sheet together.