ES6 学习笔记四
在创建JavaScript模块时,export 语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import 语句使用它们
Export
1、export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能
2、无论是否声明,导出的模块都处于严格模式。 export语句不能用在嵌入式脚本中
3、export 命令可以出现在模块的任何位置
一个模块就是一个JS
文件,该文件内的所有变量,外部无法直接读取。要想希望读取该模块内的某一变量的话,该怎么办?那就需要在模块内部使用export
关键字,输出某些变量。
那么问题来了怎么使用呢?我们知道export
可以导出函数对象或者原始值,下面就了解一下正确姿势。
导出单个特性
举例:某些情况下我们定义一些常量提供给外部使用
//constant.js
export const APP_SCENE = 'dev';
export const HOST_NAME = 'http://www.dev.com';
错误的写法:接口名与模块内部变量之间,没有建立一一对应的关系
const APP_SCENE = 'dev';
const HOST_NAME = 'http://www.dev.com';
export APP_SCENE;
export HOST_NAME;
导出列表
举例:我们在做项目的时候会提供一些公共函数
//util.js
let array_max = arr => Math.max(...arr);
let array_min = arr => Math.min(...arr);
let array_chunk = (arr,size) => Array.from(
{length:Math.ceil(arr.length/size)},
(v,i)=>arr.slice(i * size, i * size + size)
);
export {array_max,array_min,array_chunk};
推荐在文件尾部使用这种方式,这样模块导出了哪些变量可以一目了然
重命名导出
举例:上列情况下,看着下划线别扭,想以驼峰式的名字
export {array_max as arrayMax,array_min as arrayMin,array_chunk as arrayChunk};
as
的实质就是将导出的接口和模块内部的变量建立一一对应关系
导出默认值
1、在一个文件或模块中,export、import 可以有多个,export default 仅有一个
2、export default 中的 default 是对应的导出接口变量
3、通过 export 方式导出,在导入时要加{ },export default 则不需要
举例: vue 的组件化
//component.vue
export default {
el:'#app',
props:{
names:{
type:Array,
default(){
return [];
},
},
},
data(){
return {
message:'super hero',
}
},
methods:{
sayLikeYou:() => 'like you',
},
}
Import
- 只读属性:不允许在加载模块的脚本里面,改写接口的引用指向,即可以改写 import 变量类型为对象的属性值,不能改写 import 变量类型为基本类型的值。
- 单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import
- import 命令会提升到整个模块的头部,首先执行
根据我们上面定义的三个文件 ,我们使用 import 功能
import {APP_SCENE,HOST_NAME} from 'constant.js'
import {array_chunk} from 'util.js'
import component from 'component.vue'
//other code
本作品采用《CC 协议》,转载必须注明作者和本文链接