export和import的答疑

正题如下

前提用过ES6的人都知道export和import 但是有没有发现，导出导入的时候总觉得和想象中的不一样，那就来看看下面的一些写法；

截图以前react项目中部分导入的写法：

import {xxx, xxxx} from 'xxx'
import xxx from 'xxx'
import('./xxx')let xxx = 'x';
export {xxx}
export class xxx {}
export default {}
exports.post()
module.exports.init = init;

参考博客 Benjaminpcm
以下引用阮一峰的ES6中的点我查看 Module，仅用于个人学习记录；

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export

// profile.js
export var firstName = 'fq';
export var lastName = 'niu';
export var year = 1995;
// 或者
var firstName = 'fq';
var lastName = 'niu';
var year = 1995;
export { firstName, lastName, year };// export命令除了输出变量，还可以输出函数或类（class）。
export function multiply(x, y) {return x * y;
};//通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
function v1() { ... }
function v2() { ... }export {v1 as streamV1,v2 as streamV2,v2 as streamLatestVersion
};
// 上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。

// export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
// 报错
export 1;
// 报错
var m = 1;
export m;/*
上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1,  1只是一个值，不是接口, 正确的写法是下面这样:
*/
// 写法一
export var m = 1;// 写法二
var m = 1;
export {m};// 写法三
var n = 1;
export {n as m};// 报错
function f() {}
export f;// 正确
export function f() {};// 正确
function f() {}
export {f};// export语句放在函数之中，结果报错
function foo() {export default 'bar' // SyntaxError
}
foo()

import

// main.js
/*
import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同;
*/
import { firstName, lastName, year } from './profile.js';function setName(element) {element.textContent = firstName + ' ' + lastName;
}// 如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import { lastName as surname } from './profile.js';

/*
import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
*/
import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
/*
上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。
*/
import {a} from './xxx.js'
a.foo = 'hello'; // 合法操作

//注意，import命令具有提升效果，会提升到整个模块的头部，首先执行
foo();
import { foo } from 'my_module';
/*
上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前;
*/

/*
由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
下面这三种写法都会报错，因为它们用到了表达式、变量和if结构。在静态分析阶段，这些语法都是没法得到值的。
*/
// 报错
import { 'f' + 'oo' } from 'my_module';// 报错
let module = 'my_module';
import { foo } from module;// 报错
if (x === 1) {import { foo } from 'module1';
} else {import { foo } from 'module2';
}


// 如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。
import 'lodash';
import 'lodash';import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
/*
上面代码中，虽然foo和bar在两个语句中加载，但是它们对应的是同一个my_module实例。也就是说，import语句是 Singleton 模式。
*/

模块的整体加载

/*
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
*/
// circle.jsexport function area(radius) {return Math.PI * radius * radius;
}
export function circumference(radius) {return 2 * Math.PI * radius;
}

// 下面加载上面的模块
// main.js
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));//上面写法是逐一指定要加载的方法，整体加载的写法如下;
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));/*
注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。
*/
import * as circle from './circle';
// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

export default

// 下面代码是一个模块文件export-default.js，它的默认输出是一个函数。
// export-default.js
export default function () {console.log('foo');
}// 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
/*
上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。
*/

// export default命令用在非匿名函数前，也是可以的。
// export-default.js
export default function foo() {console.log('foo');
}
// 或者写成
function foo() {console.log('foo');
}
export default foo;
// 上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

// 第一组
export default function crc32() { // 输出// ...
}
import crc32 from 'crc32'; // 输入// 第二组
export function crc32() { // 输出// ...
};
import {crc32} from 'crc32'; // 输入
/*
上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。
本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的:
*/
// modules.js
function add(x, y) {return x * y;
}
export {add as default};
// 等同于
// export default add;// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

//正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句
// 正确
export var a = 1;// 正确
var a = 1;
export default a;// 错误
export default var a = 1;
/*
上面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错。
同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。
*/
// 正确
export default 42;// 报错
export 42;
// 上面代码中，后一句报错是因为没有指定对外的接口，而前一句指定对外接口为default

// 如果想在一条import语句中，同时输入默认方法和其他接口，可以写成下面第二种写法
import _ from 'lodash';
import _, { each, forEach } from 'lodash';// 对应上面代码的export语句如下。
export default function (obj) {// ···
}
export function each(obj, iterator, context) {// ···
}
export { each as forEach };
// 上面代码的最后一行的意思是，暴露出forEach接口，默认指向each接口，即forEach和each指向同一个方法。

// export default也可以用来输出类。
// MyClass.js
export default class { ... }// main.js
import MyClass from 'MyClass';
let o = new MyClass();

export和import的答疑相关推荐

ES6 模块加载export 、import、export default 、import() 语法与区别，笔记总结
ES6模块加载export .import.export default .import() 语法与区别在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种. ...
【DB2】db2命令Export与Import
环境准备 1.新建表 qinys@Linux:~> db2 "create table tb1(id int,dt timestamp,name varchar(100))" ...
ABAP memory中的Export和Import
可以用于SUBMIT方式调用其他ABAP程序后,数据只能通过某个透明表暂存,在由主程序查询透明表取得结果的情况, 用memory中的Export和Import的好处是不用在通过透明表转数据了,先把子程 ...
JS ES6中export和import详解
1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...
[ECMAScript] module、export、import分别有什么作用？
[ECMAScript] module.export.import分别有什么作用? import导入模块功能.import导入的只是一个只读引用,等到脚本执行时根据引用才到模块里去取值.这也就是imp ...
命令行导出和导入数据库 How to export and import MySQL database using command line Interface...
导出 : To export MySQL database, open putty on Windows or Terminal in either MAC or Linux OS, Go to th ...
ES6模块之export和import详解
ES6模块之export和import详解 ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入( ...
DLL的Export和Import及extern
DLL的Export和Import及extern DLL的export是指将DLL中的函数和数据输出到其它程式中,以供其使用. DLL的import是指使用DLL的程式引入DLL中的函数和数据. DL ...
关于使用export和import的2个报错
关于使用export和import的2个报错报错:Uncaught SyntaxError: Cannot use import statement outside a module 报错:Unca ...

export和import的答疑

正题如下

export

import

模块的整体加载

export default

export和import的答疑相关推荐

最新文章

热门文章