Viewing: ko.javascript.info

. '(module)' , .

. .

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

, .

2015 . Node.js . .

. .

export import .

export ( ).
import ( ).

export sayHi.js sayHi .

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

import main.js sayHi .

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

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

import (./sayHi.js) 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:// import, export . static-server, (Visual Studio Code Live Server Extension) .

(use strict) . .

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

. .

user.js hello.js user.js user hello.js . ( ).

hello.js

user.js

index.html

alert(user); //      `Uncaught ReferenceError: user is not defined`    .

let user = "John";

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

export , import .

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"> .

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

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

window window window.user . .

. .

alert (alert.js) . .

          //  alert.js
alert(" !");
        

          //     

//  1.js
import `./alert.js`; //  ' !' .

//  2.js
import `./alert.js`; //    .
        

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

. admin admin .

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   .
        

, . admin .

*(configuration)* . .

. admin.js , admin .

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

export function sayHi() {
  alert(`${admin.name}, !`);
}
        

init.js admin.name . admin.js admin.name .

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

admin.name .

          //  other.js
import {admin, sayHi} from './admin.js';

alert(admin.name); // 

sayHi(); // , !

import.meta

import.meta .

, URL . HTML , 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" .

. , defer (defer defer, async ).

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

HTML .

<script type="module">
  alert(typeof button); //           alert  
  //  object  .    button  ' ' .
</script>

    .

<script>
  alert(typeof button); //        .
  //        undefined     .
</script>

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

. undefined , object .

, .

HTML . , . ' (loading indicator)' .

async . async HTML .

, async .

async HTML .

(./analytics.js) HTML .

, .

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

  counter.count();
</script>
        

type="module" .

src .

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

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

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

import URL . .

import .

          import {sayHi} from 'sayHi'; // Error!
// './sayHi.js'      .
        

Node.js . .

nomodule

type="module" . nomodule .

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

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

' . (Webpack) () .

. CSS, HTML .

HTML <script type="module"> (main) ( ) .
.
( ). import .
.
- .
- ((tree-shaking)).
- console, debugger .
- (Babel) .
- , .

. import, export . import, export type="module" . .

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

. import ,export <script type="module"> . .
- .
- .
- ( , ) CORS .
- .
. import, export .
(use strict).
. .

export . import . .