Javascript modules: Difference between revisions
From wikinotes
No edit summary |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
In recent years, javascript has been extended to support modules. | In recent years, javascript has been extended to support modules with import semantics. | ||
= Documentation = | = Documentation = | ||
| Line 12: | Line 12: | ||
= Example = | = Example = | ||
<blockquote> | <blockquote> | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="html5"> | ||
< | <!-- index.html --> | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
| Line 23: | Line 21: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="javascript"> | ||
// main.js | |||
import | import * as Math from './modules/math.js' | ||
console.log(Math.sum(1, 2)); | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// modules/math.js | |||
export function sum(a, b) { | |||
export { | return a + b; | ||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
</blockquote><!-- Example --> | </blockquote><!-- Example --> | ||
= | = Syntax = | ||
<blockquote> | <blockquote> | ||
== Imports == | |||
<blockquote> | |||
<syntaxhighlight lang="javascript"> | |||
import * as Foo from './modules/foo.js' // exported symbols accessed on 'Foo' namespace | |||
import { Bar, Baz } from './modules/foo.js' // import exported 'Bar', 'Baz' into current namespace | |||
import { Bar as barbar } from './modules/foo.js' // import exported 'Bar' as symbol 'barbar' within current namespace | |||
</syntaxhighlight> | |||
</blockquote><!-- Imports --> | |||
== | == Exports == | ||
<blockquote> | <blockquote> | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// | // symbols can be exported in one location | ||
export { foo, bar, baz }; | |||
// symbols can be exported at declaration. ex: | |||
export function foo() { ... }; | |||
export const number = 123; | |||
</syntaxhighlight> | |||
You can also export one function as default | |||
<syntaxhighlight lang="javascript"> | |||
// math.js | |||
export default function sum(a, b) { | export default function sum(a, b) { | ||
return a + b; | return a + b; | ||
} | } | ||
Math.default( | // main.js | ||
import * as Math from './math.js' | |||
Math.default(2, 2); // ('default' is the 'sum' function) | |||
</syntaxhighlight> | </syntaxhighlight> | ||
</blockquote><!-- | </blockquote><!-- Exports --> | ||
</blockquote><!-- | </blockquote><!-- Syntax --> | ||
Latest revision as of 16:03, 18 December 2022
In recent years, javascript has been extended to support modules with import semantics.
Documentation
MDN modules https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Example
<!-- index.html --> <html lang="en"> <head> <script type="module" src="main.js"></script> <!-- add main.js to file --> </head> </html>// main.js import * as Math from './modules/math.js' console.log(Math.sum(1, 2));// modules/math.js export function sum(a, b) { return a + b; }
Syntax
Imports
import * as Foo from './modules/foo.js' // exported symbols accessed on 'Foo' namespace import { Bar, Baz } from './modules/foo.js' // import exported 'Bar', 'Baz' into current namespace import { Bar as barbar } from './modules/foo.js' // import exported 'Bar' as symbol 'barbar' within current namespaceExports
// symbols can be exported in one location export { foo, bar, baz }; // symbols can be exported at declaration. ex: export function foo() { ... }; export const number = 123;You can also export one function as default
// math.js export default function sum(a, b) { return a + b; } // main.js import * as Math from './math.js' Math.default(2, 2); // ('default' is the 'sum' function)
