Learn JavaScript in Construct, part 12: Modules

15

Index

Features on these Courses

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

7,880 visits, 18,398 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

Imports for events

Previously we used scripts in event sheets. Using imports here requires another step. The problem is the code for scripts in event sheets is actually run inside a function, and import and export statements are not allowed inside a function. So there needs to be another way to make use of imports for scripts in event sheets.

Exporting from scripts in event sheets is not supported - you have to use a script file for that. However importing is supported with the use of a special file with the purpose Imports for events. In short, everything imported in that file is available to all scripts in event sheets.

Download and open the project below for an example of this.

.C3P

imports-for-events.c3p

Download now 47.58 KB

In this example we have the following:

  • In main.js a function named GetMessage is exported, which just returns a string with a message. (The main script can still export things and be imported elsewhere.)
  • There is another script file named importsForEvents.js, which has the Purpose property set to Imports for events. Anything imported in this special script file can be used in scripts in event sheets. This file imports GetMessage from main.js. Therefore GetMessage can now be used in all scripts in event sheets.
  • In Event sheet 1, a script runs in On start of layout, which logs GetMessage() to the console. Preview the project, and you'll see the message appear in the console.

Instead of calling a function to retrieve a value, you could also use a function to do some work. For example if you have a long function with lots of code, it's often more convenient to put it in a script file, and then call that function from a script in an event sheet. That's done exactly the same way as the above example, just that the GetMessage function would do something else (and be called something else).

Using global variables is another way to do this, since globalThis is accessible both in script files and in scripts in event sheets. But as previously noted, using global variables has several pitfalls, so using modules this way is preferable.

Another useful approach is to put this in importsForEvents.js:

import * as Main from "./main.js";

Then your scripts in event sheets can call any function exported from main.js, e.g. Main.GetMessage(). In larger projects you could repeat this for other script files to make it easy to call functions in different script files from scripts in event sheets.

Scripts in event sheets are a concept unique to Construct, so this approach of using modules to expose functions there is part of Construct's own design. When working with scripts in event sheets, there's not always as much room to type (especially in the actions section, as the left side is taken up with conditions), and there's often a lot of events too. So a good style to adopt is to write any long chunks of code as functions in script files, and call those functions in scripts in event sheets, via imports for events. This keeps JavaScript code in event sheets short and simple, and makes it easier to call other functions and imports in the script file.

Conclusion

In this part we've covered:

  • How each script file is its own module, which by default keeps its contents private
  • Using export to share something outside a script file
  • Using import to use another script file's export
  • How Construct only loads the main script, and other scripts must be imported
  • Other ways to use import and export, including the default export
  • How exports are read-only, and how using object properties instead of variables for exports can be useful
  • Using the Imports for events script to call a function in a script file from a script in an event sheet

Learn more

We only covered a few of the ways import and export can be used. There's lots more ways they can be used, to both import and export things with both defaults and named items, using a subset of items, renaming items, and more. Check these links on the MDN Web Docs for more details.

  • export statement
  • import statement (which also covers dynamic import)
  • The MDN section on JavaScript Modules has more details about using modules
  • The Ghost Shooter code example shows a fully JavaScript coded version of the 'Ghost shooter' example, using modules to share things between script files.

Part 13

When you're ready to continue, head on to the next and final part of this guide at Learn JavaScript in Construct, part 13: Onwards!

  • 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.