Related Reading
Use JavaScript file as a module
The JavaScript module is similar to Python module. It makes code reuse easier. To use a JavaScript script file as a module, we need to specify the type of script
tag:
<script type="module" src="<path-to-js-file>"></script>
Import and Export
To reuse code in another JavaScript file, we could import content from that file. There are different syntax for import:
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");
The syntax at line 2 is particularly interesting: it allows us to define a namespace
. For example, suppose we define a getCurrentTime()
function in utils.js
file. Now in the main.js
we can import the getCurrentTime()
function and put it in the myutils
namespace.
// utils.js
function getCurrentTime() {
return Date.now();
}
export {getCurrentTime};
// main.js
import * as myutils from "./utils.js";
myutils.getCurrentTime();
Unlike Python, in order to make a function visible to other modules we need to explicitly export the function. For example, in the above code at line 6, we export the getCurrentTime()
function in the utils.js
script.
How to access functions of a module in html file?
Notice that import
and export
can only be used in a module so in order to access a function defined in a module inside a html file, the first step is to create a module script tag. What about the part in the html file which is outside the module script tag? They don't belong to any JavaScript module!
The workaround is to register the function in the window namespace. Here is the code
<!-- main.html -->
<script type="module">
import {getCurrentTime} from "./utils.js";
window.getCurrentTime = getCurrentTime;
</script>
<div id="get-current-time" onclick="getCurrentTime">
</div>
----- END -----
©2019 - 2022 all rights reserved