es6学习笔记模块导入导出-白红宇

es6学习笔记模块导入导出

阅读量：4086 次

发布时间：2019-05-25

本文共 3419 字，大约阅读时间需要 11 分钟。

ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。

ES6的模块自动采用严格模式

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

关于export

//直接导出export var year = 1958; //导出变量export function multiply(x, y) { //导出函数  return x * y;};//导出一组变量(属性,方法)var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};//导出并且重命名function v1() { ... }function v2() { ... }//即使重命名了,原来的也可以用,相当于加了别名export {  v1 as streamV1, //重命名了  v2 as streamV2,  v2 as streamLatestVersion //重命名两次};//混合导出,既定义了默认的,也定义了不默认的export default class Client{}export const foo = 'bar';    //使用的时候可以分别导入import Client,{foo} from 'module';//暴露一个模块的所有接口export * from 'module';//连锁导出    //a.js,导出一个函数export function foo(){}        //b.js,b模块导出所有内容,而这些内容来自a模块export * from 'a';    //app.js,那么在使用的时候import { foo } from 'b';//暴露一个模块的部分接口export { test } from 'module';//暴露一个模块的默认接口export { default } from 'module';

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。

export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错

一个模块只能有一个默认输出，因此export default命令只能使用一次

export * 命令会忽略模块的default方法

关于import

//直接导入,并且输入到不同的变量里面,这些变量名需要跟导入源一致import {firstName, lastName, year} from './profile';  //导入之后就可以直接使用了function setName(element) {  element.textContent = firstName + ' ' + lastName;}//直接导入,不过没有写路径import {myMethod} from 'util';//直接导入并重命名,主要是为了方便import { lastName as surname } from './profile';//不引入接口,仅运行模块代码import 'XXXmodule'//因为default是关键字,导入的时候不能直接使用,需要改一下名字,用as改import { default as xxx } from 'modules';    //相当于,xxx是一个新的名字,能够代替导入模块import xxx from 'module'//以lodash模块举例,他的default是_,非default有一个each接口,可以同时导入import _, { each } from 'lodash';

import命令具有提升效果，会提升到整个模块的头部

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js路径可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import是静态执行,也是编译前执行的,所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

多次执行同一个import的话,只会执行一次

import 不能导入*,要用as改名

复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

export { es6 as default } from './someModule';// 等同于import { es6 } from './someModule';export default es6;

模块继承

// circleplus.js    //* 导出circle的所有,但是会忽略defaultexport * from 'circle';export var e = 2.71828182846; //自定义了一个e变量导出export default function(x) { //自定义了一个default导出,因为 * 忽略了default,如果需要导出的话,需要自己补一个  return Math.exp(x);}// main.js    //导入了circleplus模块的所有,不过* 一样会忽略了defaultimport * as math from 'circleplus'; //将circleplus全部导入并改名为mathimport exp from 'circleplus'; //导入了circleplus的default//exp就是导入的默认default 函数console.log(exp(math.e)); //math就是circleplus,所以可以调用变量e

跨模块常量

const声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法。

// constants.js 模块export const A = 1;export const B = 3;export const C = 4;// test1.js 模块import * as constants from './constants'; //通过导入模块来共享console.log(constants.A); // 1console.log(constants.B); // 3// test2.js 模块import {A, B} from './constants';console.log(A); // 1console.log(B); // 3

如果要使用的常量非常多，可以建一个专门的constants目录，将各种常量写在不同的文件里面，保存在该目录下。

// constants/db.jsexport const db = {  url: 'http://my.couchdbserver.local:5984',  admin_username: 'admin',  admin_password: 'admin password'};// constants/user.jsexport const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];然后，将这些文件输出的常量，合并在index.js里面。// constants/index.jsexport {db} from './db'; //使用一个中转模块(文件)来收集这些常量模块export {users} from './users';使用的时候，直接加载index.js就可以了。// script.jsimport {db, users} from './constants';