> For the complete documentation index, see [llms.txt](https://petercheng7788.gitbook.io/developer-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://petercheng7788.gitbook.io/developer-note/programming-language/javascript/module.md).
# Module
## Introduction
* As our application grows bigger, we want to split it into multiple files, so called “modules”. A module may contain a class or a library of functions for a specific purpose.
* But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand.
## AMD (Asynchronous Module Definition)
* It is invented by RequireJS
* Here is an example
```javascript
// Define moduleA using AMD
define(function() {
// Module implementation
return {
sayHello: function() {
console.log("Hello from moduleA!");
}
};
});
```
```javascript
// Load moduleA and use it
require(['moduleA'], function(moduleA) {
moduleA.sayHello();
});
```
```html
AMD Example
AMD Example
```
## CommonJS
* It is mainly designed for NodeJS usage
* By default, NodeJS treats JavaScript code as CommonJS modules. Because of this, CommonJS modules are characterized by the `require` statement for module imports and `module.exports` for module exports.
```javascript
module.exports.a = "a";
```
```javascript
module.exports = "b"
```
```javascript
const {a} = require("./a");
const b = require("./n");
console.log(a ,b); // a , b
```
## ECMAScript 6 (ES6)
* After javascript comes to version 6, import & export is added
* Most of browser support es6, however, NodeJS default is using commonJS
* In order to apply es6 on nodejs, it is recommended to use typescript for development, and compile in commonjs
```typescript
import {a} from "./a";
console.log("123",a);
```
```typescript
export const a = 'A';
```
* After compiling into javascript
```javascript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var a_1 = require("./a");
console.log("123", a_1.a);
```
```javascript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.a = void 0;
exports.a = 'A';
```
### Syntax
* Given the view1 module
```javascript
import view1 from './view1.js';
```
* would basically be equivalent to
```javascript
import * as temp from './view1.js';
const view1 = temp.default;
```
* In fact the first import above a shorthand for
```javascript
import { default as view1 } from './view1.js';
```
## ESNext
* Targeting ESNext enables module system using the next version of JavaScript is, meaning it includes the latest proposals and features that may not be finalized yet.
## References
{% embed url="" %}