ES6模块的import和export用法

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

ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能:export和import

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。如下图(假设a和b文件在同一目录下)

// a.js
var sex="boy";var echo=function(value){  console.log(value)}export {sex,echo}  //通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到//不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。

// b.js通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。import {sex,echo} from "./a.js" console.log(sex)   // boyecho(sex) // boy

a.js文件也可以按如下export语法写,但不如上边直观,不太推荐。

// a.jsexport var sex="boy";
export var echo=function(value){
  console.log(value)
}

//因为function echo(){}等价于 var echo=function(){}所以也可以写成export function echo(value){   console.log(value)}

以上是export与module的基本用法,再进行拓展学习

前面的例子可以看出,b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

//a.jsvar sex="boy";
export default sex(sex不能加大括号)//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。

// b.js本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"import any12 from "./a.js"
console.log(any,any12)   // boy,boy

参考:http://es6.ruanyifeng.com/#docs/module

时间: 2024-11-08 12:52:51

ES6模块的import和export用法的相关文章

ES6模块的import和export用法总结

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

ES6中的import与export对class操作相关用法举例

两种用法: 一.指定输出类名 // export 输出 export class App extends React.Componet { // ..code } // import 引入 import {App} from './app'; 二.不指定输出类名 // export 输出 export default class App extends React.Componet { // ..code } // 此时import命令可以为引入的类指定任意名字. import App from

ES6学习笔记<五> Module的操作——import、export、as

import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起. 这有可能导致两个问题: 一方面js代码变得很臃肿,难以维护 另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug 在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种

(转)关于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和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

[ES6]import 与export的用法 ,export 与export default 的 区别 以及用法

一.import 与export export(导出):用于对外输出本模块(一个文件可以理解为一个模块)变量的接口: import(导入):用于在一个模块中加载另一个含有export接口的模块. 1.一个a.js文件有如下代码: a.导出单个变量: export var name="李四"; b.导出多个变量: var name1="李四"; var name2="张三"; export { name1 ,name2 } c.导出函数: func

export ,export default 和 import 区别 以及用法

首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import用于在一个模块中加载另一个含有export接口的模块. 也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件).这几个都是ES6的语法. export和import(一个导出一个导入) 一个a.js文件有如下代码: export

ES6新特性:使用export和import实现模块化

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接: 现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块: 现代浏览器对模块(module)支持程度不同, 目前都是

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 中使