ECMAScript modules

ECMAScript modules in browsers

https://jakearchibald.com/2017/es-modules-in-browsers/

基本示例

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<script type="module">
  import {addTextToBody} from './utils.js';

  addTextToBody('Modules are pretty cool.');
</script>

// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

export/import

export function name() {}
export function draw() {}

// 或者
function name() {}
function draw() {}
export { name, draw };

import { name, draw, reportArea, reportPerimeter } from './square.js';
name()

import * as Square from './square.js';
Square.name()

function randomSquare() {}
export default randomSquare;

// 或者
export default function() {}

import randomSquare from './square.js';
// 相当于给default 取了个别名
import {default as randomSquare} from './square.js';
// 还可以混合使用
import sum, { color } from "./example.js";

外部链接执行顺序, type="module" 默认有defer 延迟执行效果

<!-- This script will execute after… -->
<script type="module" src="1.mjs"></script><!-- 2 -->

<!-- …this script… -->
<script src="2.js"></script><!-- 1, 第一个执行 -->

<!-- …but before this script. -->
<script defer src="3.js"></script><!-- 3 -->