ES Module的语法与使用

export
1.输出方式

//输出简单变量
export var a=1;
//方法
export function fn(){
     
//
}
//类
export class c{
     
//....	
}

2.放在花括号中输出

var a=1;
var b=2;
export{
     a,b};

function fn(){
     
//
}
export{
     fn};

class c{
     
//
}
export{
     c};

3.as语法
ES module可以给输出的内容重命名，使用as来实现

var a=1;
export{
     a as b}

注意点
export命令可以写在当前模块顶层作用域的任何地方，写在块级作用域中会报错。

if(true){
     
	export var b=2;
}

动态性
export命令输出的值是动态性的，在当前文件变量修改时，export输出的值也会随之变化。

export var a=1;
setTimeout(()=>a=2,500);

import

1.花括号引入

//import{...}from....
import{
     a} from 'xxx.js'
console.log(a);

花括号内的内容是其他模块export输出的内容，用as语法时是写as的名称。from后面的路径可以是绝对路径，相对路径，或者是模块名

2.as语法

//将引入的内容使用另一种别名，即等同于赋值给另一个变量
import {
     a as b} from '...js'

3.导入整个模块
import “module”

注意点：

sington
import命令是sington即单例模式，多次引用只会被当作引用一次。单例引用模式旨在第一次引用时引用，后面的引用会直接使用之前引用的内容。

import {
     a} from 'module.js'
import {
     a} from "module.js"

上面i写了两句import语句，实际上只import了一次。

只读性

iimport命令引入的变量都是只读的，不能对其重新赋值，如果对import的变量进行赋值，则会报Syntax Error的错误。

import {
     a} from "xxx.js"
a=2;		//报错

提升性

和var的变量声明提升一样，import引入的变量会提升到整个模块的头部，被首先执行。

console.log(a);
import {
     a} from 'xxx.js'

静态执行

import是静态执行的，和require不一样，import实在编译的时候执行的，所以不能使用表达式和变量，也不能在块级作用域中使用。

import {
     'a'+'b'} from 'xxx.js'

let a='b';
import{
     a} from 'xxx.js'

if(true){
     
import{
     b} from 'xxx.js'
}

这里的代码分别使用了拼接字符串，使用变量的值以及在块级作用域中使用import，都是会报错的。

export default

输出语法
1.声明后输出变量

var a=1;
export default a;

2.输出匿名函数

export default function(){
     
//
}
//使用这个语法，输出非匿名函数也和上面一样。

3.放在花括号中输出

var a=1;
var b=2;
expoprt default{
     a,b}

4.不能输出声明

//正确写法
export var a=1;
var a=1;
export default a;
//错误写法
export default var a=1;

import时变量名可以不同
直接使用export命令来输出内容，在import时必须知道export时输出的变量名或函数名，类名，而使用export default时，在import的时候可以忽略输出时的变量名。

var a=1;
export{
     a}
import {
     a} from './module.js' 

var a=1;
export default a;

import b,{
     } from './module.js'

从上面个可以看出，使用export命令输出变量a,import的时候必须使用变量名a，而使用export default时不用使用同样的变量名，并且变量是写在作用域之外的，并用逗号隔开上面的例子中使用变量b作为变量名。

唯一性
export defaul只能使用一次，只能有一个默认的，而export是能够多次输出的。

在浏览器中使用

在浏览器中使用的话会报错

，实际上，这是因为我们在本地打开的，只要将它放在一个服务器下启动就可以了，使用vscode的话可以使用插件liveServer启动。
1.首先打开setting设置，加入下面代码，选中打开的项目右键打开。

"liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.NoBrowser": false,
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",