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的变量或方法，而后系统容许你为它取任意名字。