ES6读书简记·Module语法

CY 2019年01月07日 50次浏览

本文摘自: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;functionclass也一样,不能直接暴漏一个functionclass的引用,应该包装成对象,或者暴漏出去一个接口(上面语法那样写)

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模式。

最好不要将requireimport写到同一个模块中,因为import会比require执行的早,import命令是编译阶段执行的,require是运行阶段执行的

export default 命令

使用export导出然后使用import导入,这个时候import需要知道export导出了什么,才可以导入。

export default可以让import不用知道导出了什么,就可以用了。

他的用法和export非常像,但是它可以直接导出functionclass的引用名或者一个简单值

使用import导入的时候可以使用任意名字来接收export default的导出

import customName from './export-default'; // 就不需要大括号了

一个模块只能有一个export default

export default命令后面不能跟变量声明语句,例如letvar

如果export defaultexport 一起使用,需要写成:

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()是异步的

更多信息