ES6中 export与import
ES6中exports 与import
一个独立的模块文件暴露接口/变量供其他程序文件使用,通过export关键字导出该文件变量,程序文件通过import关键字引入该模块文件变量
命名导出(names export)
可以导出多个函数/变量,但必须要明确导出的变量名,在工具类函数中常使用
// utils.js
export const rand = Math.random();
export function square(x) {return x * x;
}// index.js 使用方式1
import { rand,square } from '../utils';
console.log(square(11)); // 121// index.js 使用方式2 使用* as全部变量集合导出
import * as utils from '../utils';
console.log(utils.square(11)); // 121
用大括号批量导出一组变量
const rand = Math.random();
function square(x) {return x * x;
}
function add(x, y) {return x + y;
}
export {rand, square, add};
使用as 重命名
function f1() {}
function f2() {}
function f3() {}
export {f1 as fun1,f2 as fun2,f3 as fun3,
}
export 导出必须是在模块的顶层,不能在函数或者条件语句的作用域里面
function f() {export n from './n'
}
f() // SyntaxError
export 命令规定的是对外接口,必须与模块内部变量建立一一对应的关系
export 后面不可以是表达式,因为表达式只有值,没有名字无法解构。
// 写法一
export var m = 1;// 写法二
var m = 1;
export {m};// 写法三
var n = 1;
export {n as m};// 报错
export 1;// 报错
var m = 1;
export m;
//报错的写法原因是:没有提供对外的接口,第一种直接输出1,第二种虽然有变量m,但还是直接输出1,导致无法解构。
function
和class
的输出,也必须遵守这样的写法。
// 报错
function f() {}
export f;// 正确
export function f() {};// 正确
function f() {}
export {f};
默认导出(default exports)
z这种方式导出类文件或者功能单一的函数文件
变量/函数前面加export default 关键字
默认导出 可以是表达式/可以为原始值
每个模块文件只有一个默认到处
//导出一个值
export default 3445
//导出一个函数
// tools.js
export default function () {}
//index.js
import myfun from '../tools'
myfun()
//导出一个类
//MyClass.js
class myClass{constructor() {}
}
export default myClass
// 或者export { MyClass as default};// index.js
import MyClass from 'MyClass';
export default 与 export 的区别:
不需要知道导出的具体变量名;
导入【import】时不需要 { } 包裹;
Combinations exports (混合导出)
混合导出是 Named exports 和 Default exports 组合导出。
混合导出后,默认导入一定放在命名导入前面;
// tools.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
...
}
export function* myGeneratorFunc() {
...
}
export default class MyClass {
...
}// index.js
import MyClass, { myValue, myFunc } from 'tools';
import命令
export定义模块对外的接口,其他文件通过import加载模块
import 接收一个花括号 里面指定export的变量名,必须与被导入模块对外接口的名称相同
可以用as关键字来重命名导入的变量
//index.js
import {firstFun,lastFun,count} from 'tools'//as 重命名
import {firstFun as firF,lastFun as last,count} from 'tools'
import后的from 可以指定模块的路径名,可以是绝对路径,相对路径, .js路径可以省略,如果只有模块名,不带有路径,或者不带其他文件后缀名,需要有配置文件指定例如webpack。
注意,import
命令具有提升效果,会提升到整个模块的头部,首先执行。(是在编译阶段执行的)
因为import是静态执行的,不能使用表达式和变量,即在运行时才能拿到结果的语法结构(e.g. if...else...)
import * as utils from './utils';// 下面两行都是不允许的
utils.foo = 'hello';
utils.area = function () {};
****import
和export
命令只能在模块的顶层,不能在代码块之中。否则会语法报错。
这样的设计,可以提高编译器效率,但是没有办法实现运行时加载。
因为require是运行时加载,所以import命令没有办法代替require的动态加载功能。
所以引入了import()函数。完成动态加载。
import(url)//url 加载文件路径 import能接受什么参数,import()可以接受同样的参数
import() 函数返回一个 promise对象
import(`../eare.js`).then(module => {...}).catch(err => {...});import(`./tools-modules/${pagenation}.js`).then(module => {...}).catch(err => {...});
import函数适用场合
1.按需加载
var btn = document.querySelector('button')btn.addEventListener('click',function () {import('./url').then(res=>{...}).catch(err=>{...})
})
事件监听,触发事件后执行加载动作
2.条件加载
if(true){import('./url').then(res=>{...}).catch(err=>{...})
}else{...
}
ES6中 export与import相关推荐
- JS ES6中export和import详解
1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...
- ES6中export及export default的区别
在ES6中,export和export default均可用于导出常量.函数.文件.模块等,你可以在其他文件或模块中通过import + (常量 | 函数 | 文件 | 模块)名的方式将其导入,以便能 ...
- es6中export和export default的区别
export与export default均可用于导出常量.函数.文件.模块你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用在一 ...
- ES6的export与Nodejs的module.exports比较
首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念. CommonJS模块规范 Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个 ...
- import export php,import与export在node.js中的使用方法
import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码.(关于node.js模块,可参考其他node.js模 ...
- 五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用
一.JavaScript原始功能 -在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的. 那个时候的代码是怎么写的呢? 直接将代码写在<scri ...
- ES6模块之export和import详解
ES6模块之export和import详解 ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入( ...
- ES6 模块加载export 、import、export default 、import() 语法与区别,笔记总结
ES6模块加载export .import.export default .import() 语法与区别 在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种. ...
- ES6中表达export default const是无效的
问题 如果您是ES6新手,可以参考一下本文--高手请移驾别往! 请先看下面的图形描述: 也就是说,ES6中default后面是不允许跟const关键字的. 分析 上图中表达可以更换成另一种形式,就可以 ...
最新文章
- 《WCF揭秘》:欢迎大家来找我的茬!
- idea ctrl+alt+t快捷键
- 使用u-boot的tftp下载功能烧写程序到Nand Flash ——韦东山嵌入式Linux学习笔记09
- 快速失败(fail-fast)和安全失败(fail-safe)
- 数据结构 【实验3 链表基本操作】
- 使用 Linux 15 年后,我重新回到 Windows:感觉非常糟糕
- 使PNG图片在IE6下透明(非背景图片)
- 《C++ Primer Plus 6th》读书笔记 - 第十一章 使用类
- 谷歌浏览器插件离线安装
- PID算法基本原理及整定实现方法
- php 公众号多图文消息,微信公众号怎么发布号多图文消息?微信公众号发布号多图文消息的方法...
- java基础之多线程与Lambda表达式
- 移动产品设计书籍推荐
- 原生JS实现简单打砖块弹球小游戏
- 【技术】怎么将PPT中的白底图片,白色部分变透明?
- 八、在创业公司工作的心理历程
- 亚马逊Amazon SP-API注册申请和授权对接开发和亚马逊SP-API开发人员注册资料的注意事项,PII申请的事项
- 如何设计宝贝详情页提高转化率?
- 《Focal Loss GHM Loss Dice Los》论文笔记
- 《LINUX KERNEL MEMORY BARRIERS》