关于javascript:CommonJs-与-ESM

45次阅读

共计 1891 个字符，预计需要花费 5 分钟才能阅读完成。

ES Modules

个性

  • 主动采纳严格模式，疏忽 ‘user strict’
  • 每个 ES Module 都是运行在独自的公有作用域中
  • ESM 通过 CORS 申请内部 JS 模块
  • ESM 的 script 标签会提早执行脚本 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES Module</title>
  </head>
  <body>
    hahhha
  </body>
  <script type="module">
    console.log("this is es module");
  </script>
  <!-- 1 主动采纳严格模式，疏忽 'user strict' -->
  <script type="module">
    console.log(this);
  </script>
  <!-- 2 每个 ES Module 都是运行在独自的公有作用域中 -->
  <script type="module">
    var foo = 100;
    console.log(foo);
  </script>
  <script type="module">
    console.log(foo);
  </script>
  <!-- 3 ESM 通过 CORS 申请内部 JS 模块 -->
  <script type="module" src=""></script>
  <!-- 4 ESM 的 script 标签会提早执行脚本 -->
  <script defer>
    alert("hello");
  </script>
</html>

export

能够独自导出变量，函数，类 

export var name = "foo module";

export function hello() {console.log("hello");
}

export class Person {}

能够在尾部对立导出 

var name = "foo module";

function hello() {console.log("hello");
}

class Person {}

export {name, hello, Person};

导出重命名 

var name = "foo module";

export {name as fullName};

// 导入
// import {fullName} from "./module.js";
// console.log(fullName);

default

var name = "foo module";

function hello() {console.log("hello");
}

class Person {}

export default {name, hello};

// 导入
// import mode from "./module.js";
// console.log(mode.name);
// console.log(mode.hello());
var name = "foo module";

function hello() {console.log("hello");
}

export {hello as default, name};

// 导入
// import {default as hello, name} from "./module.js";
// console.log(name);
// console.log(hello());

注意事项

  • export {} 不是字面量对象，import 引入的也不是解构，都是固定语法
  • 通过 export 导出的不是值，而是值的地址，内部取值会受到外部值批改的影响
  • 内部导入的成员属于只读成员（常量），无奈批改

import

  • import xx from './module.js' 门路名称必须残缺不能省略（能够应用相对或相对路径），./ 或 / 不能省略，否则会认为是加载模块
  • import xx from 'http://module.js' 能够应用残缺的 url 拜访
  • import {} from './module.js' 只会执行模块，不会提取成员，等同于 import './module.js'
  • import * as all from './module.js' 导入所有办法，通过 all.xx 应用成员
  • import() 动静导入模块

ESM in Node.js

  • ES Modules 中能够导入 CommonJS 模块
  • CommonJS 中不能导入 ES Modules 模块
  • CommonJS 始终只会导出一个默认成员
  • 留神 import 不是解构导出对象

将 package.json 中增加 type = 'module'

正文完
javascript
发表至： javascript
2021-12-12
 0
关于javascript:JavaScript-数学曲线阿基米德螺线
关于javascript:一份前端够用的-Linux-命令
JS进阶篇4原生JS实现对元素的拖拽
关于javascript:智慧物流对于智慧城市有多重要