ES6的export和import的记录

总是分不清是否要大括号的我来一个个人向记录。
简而言之就是一个每个文件都是一个模块，想引用别的模块的内容需要import，而能够import的必要条件是被引用的文件export了。

export的方式

• 因为每个变量/函数需要被外界引用都需要被export，所以最简单的方式是如常定义和使用，在最前面加一个export。

  // profile.js
  export var firstName = 'Michael';
  export function multiply(x, y) {
    return x * y;
  };
  

• 但是这样不可以改名，也不够直观。所以通常是单独在文件底部按照变量名字导出接口，也就是必须要加大括号，如果想改名字就加上as来改名。

  function v1() { ... }
  function v2() { ... }
  
  export {
    v1 as streamV1,
    v2
  };
  

  • export default导出，用户不需要知道导出的接口名字。注意一个模块里面理所应当只有一个export default，但是在文件底部单独导出时同样一次可以导出多个接口。

  export default function () {
    console.log('foo');
  }
  
  // 这是另一个js文件里面的例子
  const myclass = { ...};
  export default  {myclass,exp}
  
  // export default甚至可以和其他默认导出一起使用
  export default function (obj) { }
  export function each(obj, iterator, context) {// ···}
  export { each as forEach };
  

  因为export default命令的本质是将后面的值，赋给default变量，但是注意之前有个错误写法在export default中是正确的：

  
  // 错误。 在不是export default中错误，因为导出的是值而不是接口，但是default正是需要值。
  var a = 1;
  export a;	
  
  // 正确， 这里直接调用default就可以得到1
  var a = 1;
  export default a;
  
  // 正确
  export var a = 1;
  
  // 错误
  export default var a = 1;
  
  //正确，注意这个想得到a，需要通过default.a才能得到1
  var a = 1
  export default { a }
  

import引入

• 按照接口简单引入，因此也需要大括号引入。可以as改名，但是使用要与导出（或者as改过名字之后）的一致。

  // main.js
  import { firstName, lastName as surname, year } from './profile.js';
  
  function setName(element) {
    element.textContent = firstName + ' ' + surname;
  }
  

• 为了方便整体引入一个模块内全部接口

  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));
  

• 当用export default导出的时候，对应的import语句不需要使用大括号，并且因为导出的其实是名字为default的变量，所以可以直接以其他的名字导入。

  // 比如之前的export例子
  export default function (obj) {
    // ···
  }
  export function each(obj, iterator, context) {
    // ···
  }
  export { each as forEach };
  

  导出可以直接把default命名为_不加括号导出，而其他部分如常按照接口名字{ each }和改名之后的 { forEach }导出

  import _, { each, forEach } from 'lodash';
  

  注意之前有过默认输出两个变量，export default {myclass,exp};，这则是把 {myclass,exp} 看成一个对象，调用的时候需要default.myclass，比如我这里是以axios的名字导入的，想使用类需要axios.myclass

  import axios from '../api'
  // getClass是myclass类中的函数
  axios.myclass.getClass()