ES6学习笔记八（module模块export）

1、导出export，导入import组合

知识点1：导出export

lesson2.js

export let A=123;

export function test(){
    console.log('test');
}

export class Hello{
    test(){
        console.log('class');
    }
}

 

知识点2：导入import（名称要一样对应，export名字叫test，那么import导入的时候就需要用同样的名字test来导入）

index.js

import {A,test,Hello} from "./src/lesson2"  //想要哪个变量就import哪个 console.log(A,test,Hello)

 

知识点3：当需要引入的变量很多的时候，使用*加别名来解决

import * as lesson from "./src/lesson2"  //*代表引入全部变量然后别名给lesson
console.log(lesson.A,lesson.test);

 

2、导出export  default，导入import组合

lesson2.js 导出export default

 

let A=123;

function test(){
    console.log('test');
}

class Hello{
    test(){
        console.log('class');
    }
}

export default {
    A,
    test,
    Hello
}

导入index.js

import Lesson from './src/lesson2'

console.log(Lesson.test); //123

 

总结export，import ，export default

ES6模块主要有两个功能：export和import
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES6的语法。

具体可参考https://www.cnblogs.com/xiaotanke/p/7448383.html

export与export default

看完上面这几个例子，想必你一定了解了如何使用export，import,如果还是不懂可以自己动手试一试。上面讲的是export和import，但是export跟export default 有什么区别呢？如下：

1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3、在一个文件或模块中，export、import可以有多个，export default仅有一个（用于指定模块的默认输出）
4、通过export方式导出，在导入时要加{ }，export default则不需要

这样来说其实很多时候export与export default可以实现同样的目的，只是用法有些区别。注意第四条，通过export方式导出，在导入时要加{ }，export default则不需要。使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

注意：

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

上面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错。

同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。

// 正确
export default 42;

// 报错
export 42;