模块化

1. 导出变量

• 写法1

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

//useage.js
import {firstName, lastName, year} from './profile';
console.log(firstName) //Michae

注意这种写法只能直接export var不能先声明变量再export
错误写法：

var firstName = 'Michael'
export firstName

只要你直接通过export一个东西(不加default)或者说是如果你导出的是一个有名字的，那么你引入的时候就必须使用对象形式并且名字必须得和导出的一致

• 写法2

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};
//useage.js
import {firstName, lastName, year} from './profile';
console.log(firstName)

• 写法3

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
module.exports = {
  firstName,
  lastName,
  year
}

//useage.js
//这里加大括号拿到的是对应的字符串，不加大括号拿到的是一个对象
import {firstName, lastName, year} from './profile';
console.log(firstName)

2.导出函数

-写法1

//helper.js
export function getName(){}
export function getYear(){}
//main.js
import {getName, getYear} from './helper';
getName()

• 写法2

//helper.js
function getName(){}
function getYear(){}
export {getName, getYear}
//main.js
import {getName, getYear} from './helper';
getName()

使用default导出模块
使用default导出的内容在其他地方引入的时候可以自定义引入的模块名字，不需要跟你声明的一致，而且引入的时候不需要引入对象形式，而且通过export default导出的是一个整体
比如：

//one.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export default {firstName, lastName, year};

//two.js
//这里的a名字可以随便自己定义，不需要是对象形式
import a from './one.js';
//这里拿到的是一个对象整体不会像之前那样分别拿到不同的变量字符串
console.log(a)
//{firstName: "Michael", lastName: "Jackson", year: 1958}

// export-default.js
export default function () {
  console.log('foo');
}
// import-default.js
import getName from './export-default'
getName()

总结:
只要是引入的时候是对象形式的，那就是导出的名字要和引入的名字一致

1. 单独使用export
   引入的时候必须是对象形式
2. 使用module.exports={}
   引入的时候可以是对象形式也可以是单独的模块名，单独的自定义模块名字的时候拿到的是一个整体对象；默认对象形式拿到的是属性对应的值
3. 使用export default
   引入的时候是自定义的模块名，不是对象形式，每一个模块名拿到的都是一个整体