export export-default import 使用场景

参考 点击跳转 http://es6.ruanyifeng.com/#docs/module

1.export命令

变量

// 写法一export var m = 1;// 写法二var m = 1;export {m};// 写法三var n = 1; //重新取个名字export {n as m};

方法

// 正确export function f() {};// 正确function f() {}export {f};

类

export class Singer {  constructor({id, name}) {    this.id = id    this.name = name  }}

对应的import导入注意事项：

import {xxx,xxx,xxx,xx} from './xxx';

大括号里面的变量名，必须与被导入模块对外接口的名称相同。

2.export default 命令

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

变量

//正是因为exportdefault命令其实只是输出一个叫做default的变，所以它后面不能跟变量声明语句。// 正确export default 42;// 正确var a = 1;export default a;

方法

//其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。// 正确export default function () {  console.log('foo');}export default function foo() {  console.log('foo');}// 或者写成function foo() {  console.log('foo');}export default foo;

类

export default class Singer {  constructor({id, name}) {    this.id = id    this.name = name  }}

这时import命令后面，不使用大括号。：

import xxxxx  from xxxx 

3.import
如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { oldname  as newname} from './xxxx';

注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。

import语句会执行所加载的模块，因此可以有下面的写法。

import 'lodash';

总结
如果 想定义的方法或者变量很多用export。 只有一个的话用 export default.

例子：

export function  getdoctorlist(word) {  return new Promise((resovle,reject)=>{    ajax.post('/doctor/list',word)      .then(body=>{        resovle(body)      })      .catch((err)=>{        hasErr(err)        reject(err)      })  });}export function getdoctorpastlist() {  return new Promise((resovle,reject)=>{    ajax.post('/doctorPast/list')      .then(body=>{        resovle(body)      })      .catch((err)=>{        hasErr(err)        reject(err)      })  });} //import {getdoctorlist,getdoctorpastlist} from 'xxx'  // 或者import * as api from './api/api'

export const SET_TITLEONE = 'SET_TITLEONE'export const SET_TITLETWO = 'SET_TITLETWO'//import {SET_TITLEONE ，SET_TITLETWO } from './mutation-types'//或者import * as types from './mutation-types'//