JS-ES6语法运用

import导入模块，js的模块化开发

浏览器使用ES6模块化语法（使用module时js代码自动运行严格模式）：

<script type="module" src="b.js"></script>
<script nomodule src="c.js"></script> //向后兼容 当浏览器不支持es6语法运行不了b.js时 执行此代码

1、export与import (b导出a引入)

// b.js 多个导出
export var name = 'yangching';
export function add (x,y) {
    return x+y
};

// a.js 引入
import {name} from 'b.js'                //单个引入
import {add as newAdd} from 'b.js'      // 单个引入并重命名
console.log(name) //yanching
console.lo(newAdd(1,2)) // 3

// b.js 一起导出
var name = 'yangching';
function add (x,y) {
    return x+y
};
export {name,add}
 // a.js 一起引入
import {name,add} from 'b.js';
console.log(name)  // yangching

import * as moduleB from 'b.js';    
console.log(moduleB.name) // yangching

2、export defult 和 import （b导出a引入）
本质：export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含

// b.js 导出
var name = 'yangching';
export default name

// a.js 引入
import bb from 'b.js'
console.log(bb)
import * as lname from 'b.js'
console.log(lname)

总结：

1、export与export default均可用于导出常量、函数、文件、模块等
2、在一个文件或模块中，export、import可以有多个；export default仅有一个
3、通过export方式导出，在导入时要加{ }；export default则不需要
4、输出单个值，使用export default；输出多个值，使用export
5、export default与普通的export不要同时使用