Viewing: ja.javascript.info

JavaScript

AMD 1require.js
CommonJS Node.js
UMD 1AMD CommonJS

2015 Node.js JavaScript

?

export import :

export
import

sayHi.js :

          //  sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
        

          //  main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // function...
sayHi('John'); // Hello, John!
        

import ./sayHi.js sayHi

<script type="module">

say.js

index.html

export function sayHi(user) {
  return `Hello, ${user}!`;
}

<!doctype html>
<script type="module">
  import {sayHi} from './say.js';

  document.body.innerHTML = sayHi('John');
</script>

file:// Web import/export WebVS Code Live Server Extension

JavaScript

use strict

use strict E.g.

<script type="module">
  a = 5; // error
</script>

2hello.js user.js user :

hello.js

user.js

index.html

alert(user); // no such variable (each module has independent variables)

let user = "John";

<!doctype html>
<script type="module" src="user.js"></script>
<script type="module" src="hello.js"></script>

export import

user.js user
hello.js user.js

hello.js

user.js

index.html

import {user} from './user.js';

document.body.innerHTML = user; // John

export let user = "John";

<!doctype html>
<script type="module" src="hello.js"></script>

<script type="module">

2 type="module" :

<script type="module">
  // 
  let user = "John";
</script>

<script type="module">
  alert(user); // Error: user is not defined
</script>

e.g. window.user = "John" window

type="module"

1():

          //  alert.js
alert("Module is evaluated!");
        

          // 

//  1.js
import `./alert.js`; // Module is evaluated!

//  2.js
import `./alert.js`; // (nothing)
        

: sayHi

          //  admin.js
export let admin = {
  name: "John"
};
        

admin

1 admin :

          //  1.js
import {admin} from './admin.js';
admin.name = "Pete";

//  2.js
import {admin} from './admin.js';
alert(admin.name); // Pete

// 1.js  2.js 
// 1.js  2.js 
        

1.js admin name 2.js admin.name

1 admin

(configure)

.(credential)

admin.js . admin :

          //  admin.js
export let config = { };

export function sayHi() {
  alert(`Ready to serve, ${config.user}!`);
}
        

admin.js config

init.js config config.user :

          //  init.js
import {config} from './admin.js';
config.user = "Pete";
        

admin.js

          //  another.js
import {sayHi} from './admin.js';

sayHi(); // Ready to serve, Pete!
        

import.meta

import.meta

urlHTML url :

<script type="module">
  alert(import.meta.url);
  // script url ( HTML  url)
</script>

this undefined

this undefined

this :

<script>
  alert(this); // window
</script>

<script type="module">
  alert(this); // undefined
</script>

type="module"

JavaScript

defer ( : DOMContentLoaded, load, beforeunload, unload )

<script type="module" src="..."> HTML
HTML
:

HTML

<script type="module">
  alert(typeof button); // object:  `` 
  // 
</script>

:

<script>
  alert(typeof button); // Error: button is undefined, 
  // 
</script>

<button id="button">Button</button>

: 12! undefined object

JavaScript HTML ""

Async

async Async HTML

async

HTMl ./analytics.js

          <!-- (analytics.js) -->
<!--  <script>  -->
<script async type="module">
  import {counter} from './analytics.js';

  counter.count();
</script>
        

src :

          <!--  my.js  -->
<script type="module" src="my.js"></script>
<script type="module" src="my.js"></script>
        

CORS Access-Control-Allow-Origin: * (* )

          <!-- another-site.com  Access-Control-Allow-Origin  -->
<!--  -->
<script type="module" src="http://another-site.com/their.js"></script>
        

()

import URLURL bare import

import :

          import {sayHi} from 'sayHi'; // Error, "bare" module
//  './sayHi.js' 
        

Node.js

, nomodule

type="module" nomodule :

<script type="module">
  alert("Runs in modern browsers");
</script>

<script nomodule>
  alert(" type=module  nomodule ")
  alert(" type=module ");
</script>

Webpack

1CSS/HTML

HTML <script type="module">
:
import 1()
- (tree-shaking)
- console debugger
- JavaScript Babel]
- minify ()

1 import/export type=module :

          <!-- Webpack  bundle.js  -->
<script src="bundle.js"></script>
        

Webpack :

import/export <script type="module"> :
- CORS
import/export
use strict

import

1 Webpack