ES6语法—— 模块化开发之import和export命令详解

export:

1.导出定义的变量
2.直接在export定义导出的函数或变量
3.导出函数或变量重命名（as）
4.export default(不需要变量名称)js文件只有一个功能
5.export {fn as default}
6.export * from ..

import

1.import add from math
2.import * from math
3.import * as else
(不要修改里面的值，当做只读来用)

1.export
export命名式导出有三种方式
第一种
// 注意我这里定义变量都用了let，建议用const定义，只要知道const的性能更优就可以了

export let json = {'name': 'dkr'}
export let str = '字符串'
export function multiply (x, y) {
  return x * y
}
  上面的写法等同于（第二种）

第二种

let json = {'name': 'dkr'}
let str = '字符串'
function multiply (x, y) {
  return x * y
}
export {json, str, multiply}

第三种

你可以用as关键字重命名想要输出的变量，函数或者类名，当你这么做的时候，注意要用as重命名的值去接收

export {json as newJson, str as newStr, multiply as newMultiply}

通常情况下这个功能并没有什么软用，当然你可以拿他来输出同一个值的多种命名规则，如下

export {json as myJson, json as youJson, json as newJson}

2.import 命令

1. 我们可以通过下面的方式，引入刚才模块中的一些函数和变量

import {json, str, multiply, number} from './export.js'

导入变量和函数后，就可以使用这些数据了，在使用的过程中要注意一个点，虽然import导入的东西并不是完全“只读”的，但请尽量不要去改变里面的值，就当作“只读”来用。

2.import {json, str, multiply, number} from ‘./export.js’
json.name = ‘hello’ // 对象的值可改,但不推荐修改import导入的数据
console.log(json)
console.log(str)
// str = ‘改写字符串’ //报错,非对象引入不能改写,属于只读
console.log(multiply(2, 3))
上述代码说明了，对象内部的值可以修改，但对string类型的值修改会直接报错，总之，尽量不要去修改外部模块的值，“只读”即可。
3. import也支持引入的时候对变量名进行修改和使用，注意是变量名，不是修改变量，如下所示
import {json as myJson} from ‘./export.js’
console.log(myJson)
关于import的使用，有个小tips，import模块导入拥有提升效果，这有点类似于var的变量提升效果，你可以先使用，后定义，当然不推荐这样使用。

console.log(myJson) //这样写并不会报错
import {json as myJson} from ‘./export.js’
3.模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在自定义的对象上面。你需要通过自定义的对象去访问里面的变量或函数。

import * as Math from ‘./export.js’
console.log(Math.json)
4.export defaul命令
4.export defaul命令
从前面的例子可以看出，使用import命令的时候，你需要知道所要加载的变量名或函数名，这对于传统的"上手就能用"的开发带来了很多困扰。为了给用户提供方便，让他们不用阅读文档就能加载模块，可以用export default命令，为模块指定默认输出。先来看一下demo

export default function (…msg) {
msg.forEach((item) => {
console.log(item)
})
}
上面的代码等同于

function hello (…msg) {
msg.forEach((item) => {
console.log(item)
})
}
export default hello
上面的模块输出一个函数,用于打印信息.你可以在import导入的时候为该函数指定任意名字,不管这个函数导出的时候是匿名函数还是非匿名函数,在模块外部是无效的。加载的时候，视同匿名函数加载。

import print from ‘./exportDefault.js’
print(‘hello’, ‘world’)
上面代码的import命令，可以用任意名称指向exportDefault.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。