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'

//

你可能感兴趣的:(export export-default import 使用场景)