在 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. Action4D:人群和杂物中的在线动作识别:CVPR209论文阅读

    Action4D:人群和杂物中的在线动作识别:CVPR209论文阅读 Action4D: Online Action Recognition in the Crowd and Clutter 论文链接 ...

  2. QByteArray使用方法大全

    QByteArray 在Qt中QByteArray可以看做是c语言中 char*的升级版本.我们在使用这种类型的时候可通过这个类的构造函数申请一块动态内存,用于存储我们需要处理的字符串数据. 下面给大 ...

  3. 微软发布了Visual Studio 2022 Preview 1 以及.NET 6 Preview 5

    Microsoft 今天宣布了Visual Studio 2022 的第一个预览版,并且同时也发布了.NET 6 Preview 5. https://devblogs.microsoft.com/v ...

  4. 用好idea这几款插件,可以帮你少写30%的代码

    Easycode是idea的一个插件,可以直接对数据的表生成entity,controller,service,dao,mapper,无需任何编码,简单而强大. 1.安装(EasyCode) 我这里的 ...

  5. 孟老板 Paging3 (一) 入门

    BaseAdapter系列 ListAdapter系列 Paging3 (一) 入门 Paging3 (二) 结合 Room Paging3 (一)  入门 前言: 官方分页工具,  确实香.   但 ...

  6. .Net Core Host 之详解

    简介: 开发使用有三年经验了,想趁这个机会把net core的知识点梳理一下,也更好的研究一下.NET 5给我们带来的变化. 主机的概念: 一个主机是封装了应用程序的资源,比如一个对象: 依赖注入 ( ...

  7. CAS你知道吗?底层如何实现?ABA问题又是什么?关于这些你知道答案吗

    CAS你知道吗?如何实现? 1. compareAndSet 在volatile当中我们提到,volatile不能保证原子语义,所以当用到变量自增时,如果用到synchronized会太"重 ...

  8. hdu 1556 Color the ball 线段树 区间更新

    水一下 #include <bits/stdc++.h> #define lson l, m, rt<<1 #define rson m+1, r, rt<<1|1 ...

  9. VMware-克隆虚拟机(CentOS7)

    采用克隆完整克隆 修改系统参数,除了IP和主机名以外. 第一步 修改mac地址 在虚拟机还未启动之前,先修改该系统的mac地址,如下操作所示. 生成新的mac地址 修改主机名(reboot后生效) $ ...

  10. CentOS-Docker安装Redis(单点)

    下载镜像 $ docker pull redis 创建目录 $ mkdir -p /usr/redis/data 运行镜像 $ docker run --restart=unless-stopped ...