ES6 模块化操作

在ES5中我们要进行模块华操作需要引入第三方类库（common.js, require.js 等等），随着前后端分离，前端的业务日渐复杂，ES6为我们增加了模块话操作。（模块化 区别 于 组件化，这个是两个概念。

模块化操作主要包括两个方面。

• export :负责进行模块化，也是模块的输出。
• import : 负责把模块引，也是模块的引入操作。

export的用法：

export可以让我们把变量，函数，对象进行模块话，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。

单个变量的输出

我们新建一个temp.js文件，然后在文件中输出一个模块变量。

    export var a = '123456';

然后可以在index.js中以import的形式引入。

    import {a} from './temp.js';
    console.log(a);

这就是一个最简单的模块的输出和引入。

多变量的输出

这里声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。

    var a ='123';
    var b ='456';
    var c = 'web';
    export {a,b,c}

函数的模块化输出

    export function add(a,b){
        return a+b;
    }

as的用法

有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。

    var a ='jspang';
    var b ='技术99';
    var c = 'web';
    export {
        x as a,
        y as b,
        z as c
    }

export default的使用

加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export default的区别

1- export

导出：

    export var a ='马优晨';
    export function add(a,b){
        return a+b;
    }

导入：

    import {a,add} form './temp';//也可以分开写

2- export default

导出：

    export default var a='jspang';

导入：

    import str from './temp';

ES6的模块化不能直接在浏览器中预览，必须要使用Babel进行编译之后正常看到结果。