本文摘自:Module 的语法
ES6
的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";
。
export命令
一个模块中的所有的变量外部都无法获取,使用export
关键字可以导出这些变量
语法:
- 直接导出一个变量
export var useranme = "张三";
- 将变量包装成一个对象
export { username, password }; // 和上面那种效果一样,优先使用这种语法
- 导出一个函数或者类
export function name() { /* ... */ };
- 给输出的变量重命名
export { username as name, password as pwd, password as pass }; // 可以给一个变量重命名多次
export
只能对外暴露一个接口,而不能直接暴漏一个简单值,例如:export 1;
,function
和class
也一样,不能直接暴漏一个function
和class
的引用,应该包装成对象,或者暴漏出去一个接口(上面语法那样写)
export
暴漏出去的接口,是动态绑定的关系,也就是模块内部的值发生变化,外面引用也会实时的变化,而不是使用值的缓存。
export
命令可以出现在模块的任何位置,只要处于模块顶层作用域就可以。
import命令
用来导入export
导出的接口。
语法:
- 导入多个值:
import { username, password } from './filename.js'; // 大括号里面的变量名必须与export暴漏的名称对应
- 起别名
import { username as name, password as pwd } from './filename.js';
- 整体加载模块
import * as 别名 from './filename'; // 整体加载模块,不包含export default
import
命令导入的变量都是只读的,不允许改变模块中的暴漏的接口。如果是一个对象,改写里面的属性是可以的,但是其他模块都可以读到改写后的值,不推荐修改。
import
后面的from
指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js
后缀可以省略。如果只写模块名,而不带有路径,那么必须有配置文件,例如:package.json
。
import
会自动提升到模块的头部,必须写到顶层作用域中。
import
语句会执行所加载的模块 import '模块'
,写多次重复的import
语句,也只会执行一次,是Singleton
模式。
最好不要将require
和import
写到同一个模块中,因为import
会比require
执行的早,import
命令是编译阶段执行的,require
是运行阶段执行的
export default 命令
使用export
导出然后使用import
导入,这个时候import
需要知道export
导出了什么,才可以导入。
export default
可以让import
不用知道导出了什么,就可以用了。
他的用法和export
非常像,但是它可以直接导出function
和class
的引用名或者一个简单值
使用import
导入的时候可以使用任意名字来接收export default
的导出
import customName from './export-default'; // 就不需要大括号了
一个模块只能有一个export default
export default
命令后面不能跟变量声明语句,例如let
,var
如果export default
和 export
一起使用,需要写成:
import _, { each, forEach } from 'lodash';
_
引入的是export default
导出的,大括号中引入的是export
导出的
export default
还可以导出一个类
export 与 import 的复合写法
// 接口的转发
// 注意:下面的写法是导出,这就意味着当前模块不能直接使用foo和bar
export { foo, bar } from 'my_module';
export { foo as myFoo } from 'my_module'; // 改名
export * from 'my_module'; // 整体导出
export { default } from 'foo'; // 导出默认接口
export { es6 as default } from './someModule'; // 具名接口改为默认接口
export { default as es6 } from './someModule'; // 默认接口改为具名接口
利用上面说的接口的转发,然后再在里面添加一些export
导出自定义的一些接口,相当于完成了模块的继承
跨模块常量
经常需要在一个文件中写出所有的API
接口,写成常量的形式,然后其他文件中使用这些API
接口
// 导出
export const GET_USER_INFO = "http://127.0.0.1/getUserInfo";
// 其他文件引入
import * as constants from './filename'
console.log(constants.GET_USER_INFO);
// 或者
import { GET_USER_INFO } from './filename'
console.log(GET_USER_INFO)
上面只是导出了一个常量,如果常量特别多,可以包装成对象或者数组导出
如果需要为常量做分类,可以写一个constants
目录,里面存储各种常量文件,最后需要将这些常量文件中暴漏的常量合并在一个文件里面:
// ./constants/index.js文件
export {db} from './db';
export {users} from './users';
// 使用
import {db, users} from './constants/index';
import()
当前还是一个提案,目的是可以在运行时加载模块,类似于require()
,不过import()
是异步的