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'

//