《重学前端》学习笔记Day109

JavaScript语法：在script标签写export为什么会抛错？

脚本和模块

首先，JavaScript有两种源文件，一种叫做脚本，一种叫做模块。在ES6引入模块机制，在此之前，就只有一种源文件类型(就只有脚本)。
脚本可以由浏览器或者node环境引入执行，而模块只能由JavaScript用import引入执行。实际上区别在于是否包含import和export。
脚本是一种兼容之前的版本的定义，在这个模式下，没有import就不需要处理加载".js"文件问题。
现代浏览器可以支持script标签引入模块或脚本，如果要引入模块，就给script标签添加"type=module"，如果是脚本，就不需要加。

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

所以script不加"type=module"，默认认为加载的文件是脚本而不是模块，如果脚本中写了export，就会报错。

脚本中可以包含语句。模块中可以包含三种内容：import声明，export声明和语句。

import声明

import声明有两种用法，一个是直接import一个模块，另一个是带from的import，它能引入模块里的一些信息。
直接import一个模块，只能保证了这个模块代码被执行，引用它的模块是无法获得它的任何信息的。
带from的import意思是引入模块中一部分信息，可以把它们变成本地的变量。
分为三种用法：

import x from "./a.js" // 引入模块中导出的默认值。可以与下边两个方式组合
import {a as x, modify} from "./a.js"; // 引入模块中的变量。
import * as x from "./a.js" // 把模块中所有的变量以类似对象属性的方式引入。

export声明

export与import相对，承担的是导出的任务。
模块导出变量方式有两种，一种是独立使用export声明，另外一种是直接在声明语句前添加export关键字。
Export 还有一种特殊的用法，就是跟default联合使用。export default 表示导出一个默认变量值，它可以用于function和class。这里导出的变量是没有名称的，可以使用import x from "./a.js"，在模块中使用;

函数体预处理

var声明

function声明

class声明

指令序言机制

脚本和模块都支持一种特别的语法，叫做指令序言（Directive Prologs）。这里的指令序言最早是为了"use strtict" 设计的，规定了一种给JavaScript代码添加元信息的方式。

此文章为7月Day12学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪