ES6 export & import的基本用法

模块功能主要由两个命令组成：export & import。 export用于规定模块的对外接口。 import用来引入其他模块提供的功能。

1. export 输出模块内的变量：

   export var name = "hello world";

   export var age = 18;

   或者是(推荐写法)

   var name = "hello";

   var age = 18;

   export {name, age};

2. export输出函数

   export function add (a, b) {

       return a + b;

   } ;

   输出函数还可以用as关键字重命名：

   function A {...}

   export { A as satHi };

   需要注意的是：export输出的接口，与其内部的值是动态绑定的关系。通过接口可以得到内部实时的值。

   export可以出现在模块的任何位置，但必须是顶层。

3. import：

   import {name, age} from './detail'; //必须与对外接口的名称一致。

   注意：import可以写在模块内任意位置，但必须是顶层，而且import有提升效果，会提升到模块头部首先执行。

   另外还可以整体加载：

   import * as detail from './detail';

   console.log(‘My name is’ + detail.name + 'age is' + detail.age);

4. export default 命令：

   不需要知道export的名称， import时我们可以任意指定。

   //test.js

   export default function () {

       console.log("Hello World");

   }

   //main.js

   import myInitname form './test'

   myInitname (); //'Hello World'

   注意一个模块内 默认输出只能使用一次。而且export default 后面不能跟变量声明语句。

5. export和import可以整合写在一起：

   export {name, age} from './detail';

   export { default } from './detail';

6 import()

   适用于按需加载， 条件加载和动态路径加载。