JavaScript 原生模块_编程实战微课

JS 模块目前已获得全部主流浏览器的支持。

什么是 JavaScript 模块

JS modules 其实是一系列功能的集合。以前你可能听过说 Common JS ，AMD 等模块标准，不一样标准的模块功能都是相似的，都容许你 import 或者 export 一些东西。

JavaScript 模块目前有标准的语法，在模块中，你能够经过 export 关键字，导出一切东西（变量，函数，其它声明等等）

//lib.mjs
export const repeat = (string) => `${string} ${string}`;
export function shout(string) {
  return `${string.toUpperCase()}!`;
}

而想要导入该模块，只须要在其它文件中使用import 关键字引入便可

//main.mjs
import {repeat, shout} from './lib.mjs';
repeat('hello');
// → 'hello hello'
shout('Modules in action');
// → 'MODULES IN ACTION!'

模块中还能够导出默认值

//lib.mjs
export default function(string) {
  return `${string.toUpperCase()}!`;
}

具备默认值的模块能够以任意名字导入到其它模块中jquery

//main.mjs
import shout from './lib.mjs';
//     ^^^^^

模块和传统的script 标签引入脚本有一些区别，以下：

JS模块默认使用严格模式
模块中不支持使用 html 格式的注释，即
模块会建立本身的顶级词义上下文，这意味着，当在模块中使用var foo = 42; 语句时，并不会建立一个全局变量foo, 所以也不能经过window.foo在浏览器中访问该变量。
import 和 export 关键字只在模块中有效。

因为存在上述不一样，经过传统方式引入的脚本和以模块方式引入的脚本，就会有相同的代码，也会产生不一样的行为，于是 JS 执行环节须要知道那些脚本是模块。

在浏览器中，经过设置 <script> 元素的type 属性为 module 能够声明其实一个模块。

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

支持type="module"的浏览器会忽略带有nomudule属性的的<script>元素，这样就提供了降级处理的空间。其意义不只如此，支持type="module"的环境意味着其也支持箭头函数，async-await等新语法功能，这样引入的脚本无须再作转义处理了。