JavaScript

:

JavaScript , -, . , , JavaScript; , (, Node.js).

, , JavaScript , . Node.js , , JavaScript (, CommonJS AMD RequireJS, Webpack Babel).

, , . , , .

JavaScript import export, .

, , , GitHub. <canvas> - ( ).

, .

(. basic-modules) :

index.html
main.js
modules/
    canvas.js
    square.js

modules:

• canvas.js , canvas:

  • create() width height <div>- id parent. , 2D- id .
  • createReportList() , -, . id .

• square.js :

  • name 'square'.
  • draw() , , . , , .
  • reportArea() , .
  • reportPerimeter() , .

.mjs .js

.js , .mjs. , V8 .mjs. :

• , , , JavaScript-.
• , , Node.js, , Babel.

, .js, . , , Content-Type, JavaScript MIME type text/javascript. MIME type "The server responded with a non-JavaScript MIME type", JavaScript. .js-, MIME type .mjs-. , .mjs , GitHub Pages http- Node.js.

, , , , ( , Content-Type- .mjs-). , , , , .

.js.

.mjs .js JavaScript-, , .mjs .js .

, :

• .mjs, , TypeScript.
• <script type="module"> , . .

, , , . export.

export , , :

export const name = "square";

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return {
    length: length,
    x: x,
    y: y,
    color: color,
  };
}

var-, let-, const-, . , export , .

, , export , , , , , . :

export { name, draw, reportArea, reportPerimeter };

, , , . :

import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";

import, , , , from, , basic-modules /js-examples/modules/basic-modules.

, (.) , " ", , . , , URL- - , .

:

/js-examples/modules/basic-modules/modules/square.js

./modules/square.js

main.js.

, , , . main.js, :

let myCanvas = create("myCanvas", document.body, 480, 320);
let reportList = createReportList(myCanvas.id);

let square1 = draw(myCanvas.ctx, 50, 50, 100, "blue");
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

HTML-

main.js HTML-. , , .

, type="module" <script>-, , . main.js, :

<script type="module" src="main.js"></script>

HTML-, JavaScript- <script>-:

<script type="module">/*  JavaScript  */</script>

, , . , Firefox, , "SyntaxError: import declarations may only appear at top level of a module".

import export , .

• HTML ( file:// URL), CORS - JavaScript-. .
• , . - , strict mode .
• defer (. <script> ) , deferred .
• , <script> .
• , : , . , , , , , JavaScript. - DevTools, , , , .

, ( const-, ) , .

, , JavaScript CommonJS AMD ( ES6 : , Default exports).

, . square.js randomSquare(), , . , :

export default randomSquare;

.

, export default:

export default function(ctx) {
  ...
}

main.js , :

import randomSquare from "./modules/square.js";

. , , , randomSquare. :

import { default as randomSquare } from "./modules/square.js";

. , , , ? , , , draw(), reportArea() ..; , .

, . .

as import export.

, , , -:

//  module.js
export { function1 as newFunctionName, function2 as anotherNewFunctionName };

//  main.js
import { newFunctionName, anotherNewFunctionName } from "./modules/module.js";

//  module.js
export { function1, function2 };

//  main.js
import {
  function1 as newFunctionName,
  function2 as anotherNewFunctionName,
} from "./modules/module.js";

. renaming , , , circle.js triangle.js .

, , export :

export { name, draw, reportArea, reportPerimeter };

main.js

import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";
import { name, draw, reportArea, reportPerimeter } from "./modules/circle.js";
import { name, draw, reportArea, reportPerimeter } from "./modules/triangle.js";

"SyntaxError: redeclaration of import name" (Firefox).

, :

import {
  name as squareName,
  draw as drawSquare,
  reportArea as reportSquareArea,
  reportPerimeter as reportSquarePerimeter,
} from "./modules/square.js";

import {
  name as circleName,
  draw as drawCircle,
  reportArea as reportCircleArea,
  reportPerimeter as reportCirclePerimeter,
} from "./modules/circle.js";

import {
  name as triangleName,
  draw as drawTriangle,
  reportArea as reportTriangleArea,
  reportPerimeter as reportTrianglePerimeter,
} from "./modules/triangle.js";

, , .

//  square.js
export {
  name as squareName,
  draw as drawSquare,
  reportArea as reportSquareArea,
  reportPerimeter as reportSquarePerimeter,
};

//  main.js
import {
  squareName,
  drawSquare,
  reportSquareArea,
  reportSquarePerimeter,
} from "./modules/square.js";

. , , , , . , , .

, . . :

import * as Module from "./modules/module.js";

, module.js Module, . :

Module.function1();
Module.function2();

..

, . module-objects, , . :

export { name, draw, reportArea, reportPerimeter };

, :

import * as Canvas from "./modules/canvas.js";

import * as Square from "./modules/square.js";
import * as Circle from "./modules/circle.js";
import * as Triangle from "./modules/triangle.js";

, :

let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, "blue");
Square.reportArea(square1.length, reportList);
Square.reportPerimeter(square1.length, reportList);

, , ( , , ), .

, , , , - .

, ES classes. , square.js :

class Square {
  constructor(ctx, listId, length, x, y, color) {
    ...
  }

  draw() {
    ...
  }

  ...
}

:

export { Square };

main.js, :

import { Square } from "./modules/square.js";

, :

let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, "blue");
square1.draw();
square1.reportArea();
square1.reportPerimeter();

, . , , . :

export * from "x.js";
export { name } from "x.js";

module-aggregation. ( ) shapes.js, circle.js, square.js triangle.js . modules shape. , :

modules/
  canvas.js
  shapes.js
  shapes/
    circle.js
    square.js
    triangle.js

, :

export { Square };

. shapes.js, :

export { Square } from "./shapes/square.js";
export { Triangle } from "./shapes/triangle.js";
export { Circle } from "./shapes/circle.js";

shape.js.

, main.js , :

import { Square } from "./modules/square.js";
import { Circle } from "./modules/circle.js";
import { Triangle } from "./modules/triangle.js";

:

import { Square, Circle, Triangle } from "./modules/shapes.js";

JavaScript- , . , , , . , .

import() , . Promise, (. ), , :

import("./modules/myModule.js").then((module) => {
  //  -   
});

. dynamic-module-imports , . . Circle, Square Triangle, , .

index.html main.js , .

main.js , document.querySelector():

let squareBtn = document.querySelector(".square");

, :

squareBtn.addEventListener("click", () => {
  import("./modules/square.js").then((Module) => {
    let square1 = new Module.Square(
      myCanvas.ctx,
      myCanvas.listId,
      50,
      50,
      100,
      "blue",
    );
    square1.draw();
    square1.reportArea();
    square1.reportPerimeter();
  });
});

: Promise , , Module., Module.Square(...).

, , . , - !

• , :.js- MIME-type text/javascript ( JavaScript- MIME-type, text/javascript ), MIME-type, "The server responded with a non-JavaScript MIME type".
• HTML- ( file://), CORS - JavaScript-. . GitHub pages , .js- MIME-type.
• .mjs , - . , , macOS .js .mjs, . , x.mjs.js. macOS .mjs, .

• JavaScript- , (.)
• ES- , Hacks blog (.)
• ES- , -
• ES6 : , Hacks blog (.)
• JS: (), (.)