JavaScript学习笔记5

模块

模块的概念：一个模块就是一个文件，浏览器需要使用<script type=’'module">以使import/export可以工作。

模块可以相互加载，并可以使用特殊的指令export和import来交换功能，从另一个模块调用一个模块的函数。
export关键字：标记和可以从当前模块外部访问的变量和函数。
import关键字：允许从其他模块导入功能。

模块相对于常规脚本有几点差别：
1、模块是默认延迟解析的，下载外部模块脚本，不会阻塞HTML的处理，他们会与其他资源并行加载。模块脚本会等到HTML文档完全准备就绪才会运行，保持脚本的相对顺序，在文档中排在前面的脚本先执行。因此会产生模块能够完全访问已加载的HTML页面以及元素。
2、async可用于内联脚本，对于非模块脚本，async特性仅适用于外部脚本，异步脚本会在准备好后立即运行，独立于其他脚本或HTML文档。对于模块脚本，它也适用于内联脚本。
3、要从另一个源（域/协议/端口）加载外部脚本，需要CORS header。如果一个模块脚本是从另一个源获取的，则远程服务器必须提供表示允许获取的header Access-Control-Allow-Origin。
4、不允许裸模块，在浏览器中，import必须给出相对或绝对的URL路径，没有任何路径的模块被称为裸模块，在import中不允许这种模块。在某些环境中，想node.js或打包工具允许没有任何路径的裸模块，因为它们有自己的查找模块的方法和钩子（hook）来对裸模块进行微调，但是浏览器尚不支持裸模块。
5、模块代码只执行一次，导出仅创建一次，然后会在导入之间共享。在浏览器导入模块的过程中，重复的外部脚本会被忽略。

构建工具

在实际开发中，浏览器模块很少被以“原始”形式进行使用，通常会使用打包工具，例如Webpack，将它们打包在一起，然后部署到生产环境的服务器。
使用打包工具可以更好的控制模块的解析方式，允许我们使用裸模块和更多功能，例如CSS/HTML模块等。
构建工具实现：
1、从一个打算放在HTML中的

如果我们使用打包工具，那么脚本会被打包进一个单一文件，在这些脚本中的import、export语句会被替换成特殊的打包函数（bundler function）。最终打包好的脚本可以直接放入常规的

导出与导入

导出
1、在声明前导出，在声明之前放置export 来标记任意声明为导出，无论声明的是变量，函数，还是类都可以。
export let months=[‘1’,‘2’,‘3’,‘4’] //导出数组
export const theYears = 2021 //导出声明的变量
2、导出与声明分开
function sayHi(){alert(“Hello World”)}.
export {sayHi}

导入
1、import *，如果有很多要导入的内容，就可以使用import * as 将所有内容导入为一个对象。
import * as say from ‘./say.js’
say.sayHi(“Jhon”)

这样的通通导入看起来很便捷，但是我们不建议使用，通常要明确列出我们需要导入的内容。原因是：
明确列出导入的内容，现代的构建工具（webpack和其他工具）将模块打包到一起并对其进行优化，以加快加载速度并删除未使用的代码。也会使得导入内容的名称较短，可以更好的概述代码结构，使用的内容和位置，使得代码支持重构并且重构起来更容易。

export default
在实际中，主要有两种模块，包含库、函数包模块或声明单个实体的模块，近导出某个函数或者方法。
模块提供了一个特殊的默认导出export default语法，以使得一个模块只做一件事的方式看起来更好。

重新导出
重新导出语法export … from …允许导入内容，并立即将其导出，可能是用的其他的名字。
export {x [as y],…} from “module”
export * from “module” // 不会重新导出默认的导出
export {default [as y]} from “module” //重新倒出默认的导出
export {s [as y],…} //单独的导出