ES6 模块export import

在 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>

原文地址:https://www.cnblogs.com/jnba/p/12221745.html

时间: 2024-10-30 08:05:11

ES6 模块export import的相关文章

ES6模块的import和export用法总结

ES6之前以前出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs前者主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案. ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件

ES6模块的import和export用法

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案. ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以

commonjs模块和es6模块的区别?

commonjs模块和es6模块最主要的区别:commonjs模块是拷贝,es6模块是引用,但理解这些,先得理解对象复制的问题,在回过头来理解这两模块的区别. 一.基本数据类型的模块 ./a1.js es6模块 export var a1 = 1; setTimeout(() => a1 = 2, 500); ./a2.js commojs模块 var a2 = 2; module.exports = a2; setTimeout(() => a2 = 3 ,500); ./index.js

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

关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次.所以,import命令后面才不用加大括号,相反其它的export 输出 可以有多个,且import时必须加大括号,示例如下: 1 // modules.js 2 function add(x, y) { 3 return x * y; 4

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

最近在学习使用Webpack3的时候发现,它已经可以在不使用babel的情况下使用ES6的模块加载功能了. 说到ES6的模块加载功能,我们先复习一下CommonJS规范吧: 一  . CommonJS规范规定,在每个模块内的module变量代表当前模块.这个变量的module.exports属性是对外开放的接口. 加载某个模块,其实是加载此模块的module.exports属性. exampleA.js var x = 5; var addX = function (value) { retur

ES6模块之export和import教程

一.ES6中的模块ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入(import)两个模块. 二.导入的具体使用 场景1:只想导入源模块的部分内容假设a.js是以如下方式导出的 // a.js export var num = 100 export var name = '王小明' 那么如果我们只需要a模块的num,就应该按下面的方式导入它 // b.js import {num} from

Node.js 中使用 ES6 中的 import / export 的方法大全

转自原文 Node.js 中使用 ES6 中的 import / export 的方法大全, 2018.11 如何在 Node.js 中使用 import / export 的三种方法, 2018.8 nodejs_es6_tutorials 因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过截止 2018.8.10,How To Enable ES6 Imports in Node.JS 仍然是老大难问题 下面我来介绍三种方法可以让我们在 Node.js 中使

面向未来的 ES6 模块标准

既然模块化已经越来越重要,那么从语言层面上直接去解决这个问题就显得很有必要(况且其他语言早就有了).于是 ES6 直接在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案. 设计思想 简单来说,ES6 模块的设计思想就是:一个 JS 文件就代表一个 JS 模块.在模块中你可以使用 import 和 export 关键字来导入或导出模块中的东西. ES6 模块主要具备以下几个基本特点: 自动开启严格模式,即使

es6 模块编译 *** is not function

今天学习vuejs,里面用到了es6的写法,遇到了一个很怪的问题,不知道有人遇到么. 安装的模块引用:import Vue from 'vue';(注意,Vue处没有{},如果加上这个就报错Uncaught TypeError: _vue.Vue is not a function) 自己写的模块,route-config.js: export function routeConfig() { console.log(3);} 引用自己写的模块:import { routeConfig } fr