es6的export和import

js 导入 导出 模块

主要运用在commonjs标准封装成的模块使用

export //对外提供接口

基本写法：
var firstName = ‘Michael’;
var lastName = ‘Jackson’;
var year = 1958;

写法一：
export {firstName, lastName, year}; //可以输出变量

写法二：
export var firstName = ‘Michael’;

export function multiply(x, y) { ／／也可以输出class

return x * y;
};

写法三：
export { //利用as重新命名(感觉没必要)
firstName as streamV1,
lastName as streamV2,
year as streamLatestVersion
};

1,记住要使用export输出变量或者函数时必须加上画括号{}
2,export不能放在某个函数或者类中，它必须处在模块全局中
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

import //加载/导入模块，并获取模块对外提供的变量或者函数，无论写在什么位置程序第一个先执行它

import {firstName, lastName, year} from ‘./profile’;
//加载profile模块，并且要与export对外提供的接口一一对应顺序一样，不能自定义名称，名称只能和export对外提供的接口名称一致

import { lastName as surname } from ‘./profile’; //如果想改名称可以用as来改
如果import和export同时存在一个模块中，先输入后输出也就是先执行import在执行export，例如：
export { es6 as default } from ‘./someModule’;
// 等同于
import { es6 } from ‘./someModule’;
export default es6;

import加载模块获取接口时有一个弊端就是要预先知道对外提供接口的名称，还要一一对应写出来，这样就麻烦了万一一个接口有几十个接口呢
这样时候我们可以利用＊来代替，例如：
import * as circle from ‘./circle’;
运用时直接就circle.xx就可以调用到了，但预先还是要知道对外接口的名称
使用了＊本身就忽律了默认接口，但是又不可能一一把所有接口都列出来麻烦
如果一个模块对外提供的接口有默认接口和一些取好了名字的接口，我们可以把默认接口独立出来，例如：
import * as math from ‘circleplus’; //将其他固定名字的接口取出来统一放在math中
import exp from ‘circleplus’; //在把默认接口独立取出来

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

export default //默认接口，作用就是import时，不必预先知道输出的接口名称是什么，这是为了方便import获取对外接口

export default要配合import才能讲解

用法一：
// export-default.js
export default function () { //export default后面直接加匿名函数，如果是非匿名也可以但最后输出的还是匿名函数
console.log(‘foo’);
}

调用：
// import-default.js
import customName from ‘./export-default’; //这里的customName是自定义的，不用去管export对外接口是什么名字了

用法二：
var a = 1;
export default a; //直接加变量名
注意export default var a = 1; 这样写是错误的

用法三：
// MyClass.js
export default class { … } //也可以输出类
// main.js
import MyClass from ‘MyClass’;
let o = new MyClass();

一些转化关系，自己体会下吧

 // modules.js
function add(x, y) {
 return x * y;
}
 export {add as default};
 // 等同于
 // export default add;
// app.js
 import { default as xxx } from 'modules';
 // 等同于
 // import xxx from 'modules';

http://es6.ruanyifeng.com/#docs/module#import命令