- Modules are a single function or a collection of related functions.
- In order to structure and organize your codebase more effectively, you construct modules.
- With their help, you may divide large programs into smaller, easier-to-manage, and more independent units of code that each perform one or a few related tasks.
- It allows the developer to define private and public members individually, like in any Object-Oriented Programming Language.
- Modules can be referred to as Classes.
- You can better maintain your code by using modules.
- Imports are placed close to where they are used. If your homepage contains files, you must ensure that each item and all of its dependencies are loaded in the proper sequence.
- Each file has the same global scope, so there is an implicit link instead of an explicit one.
If you are creating modules, three things that you should include are:
- Independent: A module has to be as independent of other dependencies as possible.
- Specific: A module must be capable of carrying out one task or a related series of tasks. The primary reason for their creation is to establish specific functionality for one (type of) task per module.
- Reusable: The module that you are creating must be effective. It should be simple to incorporate into different sorts of applications.
Import: When importing public code from another module, you use the import keyword.
Export: A variable, method, class, or object is provided to other modules using the export keyword. It basically becomes a public code.
Index.html: In this, you write all your HTML code
Modules: In this, you create a separate folder where you write all the modules.
Canvas.js: This contains functions related to canvas. Now, take a look at a few of them,
- create(): It Generates a canvas with the given width and height inside a wrapper <div> with the given ID, which is then added inside the given parent element. It returns an object with the ID of the wrapper and the 2D context of the canvas.
- createReportList(): createReportList function creates a set of unordered items that are added inside a given wrapper element and can be used to generate output report data and then returns the list's ID.
Square.js: Square contains a string, area, perimeter, and shape-like functions.
- draw(): Draws a square with the parameters size, location, and color on a given canvas. It returns an object with the size, location, and color of the square.
- reportArea(): Writes the area of a square, given its length, to a certain report list.
In this main function, you have declared three modules separately with specific tasks, and you can reuse them as well. The main Module can load these Dependencies and use them.
Exporting Multiple Objects From One File
In this module, you export a variable and a function in a module.js file. Now, you will import it into the main file.
Master front-end and back-end technologies and advanced aspects in our Post Graduate Program in Full Stack Web Development. Unleash your career as an expert full stack developer. Get in touch with us NOW!
Course certification will benefit you if you wish to learn these programming languages and work as a developer or programmer. Enroll in the Full Stack Web Developer - MEAN Stack Master's program to learn Typescript.