在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库)。
ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6 的模块化分为导出(export) @与导入(import)两个模块。

ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。
模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。

定义一个export.js

let name = "Jack";
let age = 11;
let func = function(){
return `姓名:${name},年龄:${age}`
}
let myClass = class myClass {
static a = "呵呵";
}
export {name, age, func, myClass}

引入:

<script type="module">//注意 type是module;
import {name, age, func, myClass} from "./export.js";
console.log(name);
console.log(age);
console.log(func());
console.log(myClass.a );
</script>

as 的用法
默认的话,导出的和导入的名称是一样;一般的话也这么干,不过假如要改成名称,搞个别名,我们用as来搞;

<script type="module">//注意 type是module;
import {name as myName, age as myAge, func as MyFunc, myClass as mC} from "./export.js";
console.log(myName);
console.log(myAge);
console.log(MyFunc());
console.log(mC.a );
</script>

export default 命令

在一个文件或模块中,export、import 可以有多个,export default 仅有一个。export default 中的 default 是对应的导出接口变量。

通过 export 方式导出,在导入时要加{ },export default 则不需要。export default 向外暴露的成员,可以使用任意变量来接收。

export.js

let name = "Jack";
export default name

引入:

<script type="module">//注意 type是module;
import name from "./export.js"; //导入的地方,花括号也省略;
console.log(name);
</script>

一般开发,比如vue,导出的是一个组件对象;

export.js

export default {
name:'Jack',
age:20,
getInfo(){
return `姓名:${this.name},年龄:${this.age}`
}
}

引入:

<script type="module">//注意 type是module;
import student from "./export.js";//直接一个对象
console.log(student);//{name: "Jack", age: 20, getInfo: ƒ}
console.log(student.getInfo());//姓名:Jack,年龄:20
</script>

ES6 模块export import的更多相关文章

  1. ES6模块的import和export用法总结

    ES6之前以前出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs前者主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步 ...

  2. ES6模块的import和export用法

    ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载 ...

  3. ES6 模块导入import 导出export 和module.export

    ES6中新增了模块的导入和导出功能 在实际过程中可以使用 import 和 export 对模块进行导入和导出操作,具体如下 1. 名字导入/导出  (导入名字必须与导出的一致,导入时需要用花括号) ...

  4. ES6 模块与 CommonJS 模块的差异

    ES6 模块与 CommonJS 模块完全不同.它们有两个重大差异 CommonJS 输出是值的拷贝,即原来模块中的值改变不会影响已经加载的该值,ES6静态分析,动态引用,输出的是值的引用,值改变,引 ...

  5. commonjs模块和es6模块的区别?

    commonjs模块和es6模块最主要的区别:commonjs模块是拷贝,es6模块是引用,但理解这些,先得理解对象复制的问题,在回过头来理解这两模块的区别. 一.基本数据类型的模块 ./a1.js ...

  6. ES6模块之export和import详解

    ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入(import)两个模块. 1.模块导出(ex ...

  7. ES6中export , export default , import模块系统总结

    最近在学习使用Webpack3的时候发现,它已经可以在不使用babel的情况下使用ES6的模块加载功能了. 说到ES6的模块加载功能,我们先复习一下CommonJS规范吧: 一  . CommonJS ...

  8. (转)关于ES6的 模块功能 Module 中export import的用法和注意之处

    关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...

  9. ES6 模块的加载实现 import和export

    ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(m ...

随机推荐

  1. MinkowskiEngine多GPU训练

    MinkowskiEngine多GPU训练 目前,MinkowskiEngine通过数据并行化支持Multi-GPU训练.在数据并行化中,有一组微型批处理,这些微型批处理将被送到到网络的一组副本中. ...

  2. 软件工具将GPU代码迁移到fpga以用于AI应用

    软件工具将GPU代码迁移到fpga以用于AI应用 Software tools migrate GPU code to FPGAs for AI applications 人工智能软件初创公司Mips ...

  3. MySQL 主从复制&读写分离 简介

    1. 读写分离&读写分离 简介 主从同步延迟 分配机制 解决单点故障 总结 2. 主从复制&读写分离 搭建 搭建主从复制(双主) 搭建读写分离 1. 读写分离&读写分离 简介 ...

  4. P5960 【模板】差分约束算法

    题目描述 给出一组包含 $m$ 个不等式,有 $n$ 个未知数的形如: 的不等式组,求任意一组满足这个不等式组的解. 输入格式 第一行为两个正整数 $n,m$,代表未知数的数量和不等式的数量. 接下来 ...

  5. 04:Django生命周期流程图

  6. 01:osi七层---基于TCP协议的套接字(socket)

    1 : osi 七层,tcp/ip 五层 1 cs架构和bs架构2 互联网3 osi七层 tcp/ip五层 -物理层   -网线.光纤        -数据链路层       -网卡        - ...

  7. 通过Z-Order技术加速Hudi大规模数据集分析方案

    1. 背景 多维分析是大数据分析的一个典型场景,这种分析一般带有过滤条件.对于此类查询,尤其是在高基字段的过滤查询,理论上只我们对原始数据做合理的布局,结合相关过滤条件,查询引擎可以过滤掉大量不相关数 ...

  8. 利用SPI机制实现责任链模式中的处理类热插拔

    最近看到责任链模式的时候每增加一个处理类,就必须在责任链的实现类中手动增加到责任链中,具体代码基本就是list.add(new FilterImpl()),可以看到每次增加一个处理类,就必须添加一行上 ...

  9. Tomcat与spring的类加载器案例

    Tomcat与spring的类加载器案例接下来将介绍<深入理解java虚拟机>一书中的案例,并解答它所提出的问题.(部分类容来自于书中原文) Tomcat中的类加载器在Tomcat目录结构 ...

  10. MaterialDesignInXamlToolkit“无法绑定到目标方法,因其签名或安全透明度与委托类型的签名或安全透明度不兼容”异常的解决思路

    前言: 最初是想解答园友"小代码大世界 "的问题,后来想举一反三,将这个问题简单剖析下,做到知其所以然. MaterialDesignInXAML 控件库高度封装,有一些控件在使用 ...