ES Module规范

ES Module

历史上，JavaScript一直没有模块体系（module），无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，唯独javascript没有，在这之前我们都是借助第三方工具（require.js等）来实现模块化开发，直到ES6 module的出现，成为浏览器和服务器通用的模块解决方案，完全可以取代 CommonJS 和 AMD 规范

基本特点

• 每一个模块只加载一次， 并执行一次，再次加载同一文件，直接从内存中读取；
• 每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
• 通过export导出模块，通过import导入模块
• ES6模块只支持静态导入和导出，只可以在模块的最外层作用域使用import和export
  ，

export

export命令用于规定模块的对外接口，只允许导出最外层函数、类以及var、let或const声明的变量，可多次export，export出去后自动成为模块对象的属性

• 注意: export后只能跟function、class、var、let、const、default、{}

• 基本用法

    //base.js
    var myName = 'xwen';
    var age = 1995;

    // 多次export
    export {myName};
    export let gender="女";
    export function show(){ 
        console.log(666); 
    }

• as
  通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名

    function show(){
        console.log('my name is show');
    }
    
    export {show as showName};

• default

为模块指定默认输出，这样就可以在使用 import 令的时候，不必知道所要加载的变量名或函数名

    export default {
        data:{
            path:'/src/'
        }
    }

• * 作为中转模块导出，把某个模块的所有相属性/方法导出

    export * from './md.js';

import

import命令用于导入其他模块提供的功能，格式：import <module> from <url>

• url 支持格式

    // 支持
    import base from 'http://xwen.com/js/base.js';
    import base from '/js/base.js';
    import base from './base.js';
    import base from '../base.js';

    // 不支持
    import base from 'base.js';
    import base from 'js/base.js';

• 基本用法

    //从模块对象中导入属性为default的值，并赋值给变量res，无则得到undefined
    import res from './base.js';

    //导入模块对象中属性为myName的值并赋值给变量myName
    import {myName} from './base.js';

    console.log(myName,res);

• as 修改变量名

    //导入模块对象中属性为myName的值并赋值给变量username
    import {myName as username} from './base.js';

• * 导入整个模块对象

    //导入整个模块对象，并赋值给myModule变量
    import * as myModule from './base.js';

在html中使用ES Module

• 浏览器支持ES Module

在<script>标签中指定type="module"

    <script type="module">
        import res from './base.js';
        console.log(res)
    </script>

    <script type="module" src="js/base.js"></script>

• 浏览器不支持ES Module

利用webpack等工具转换成ES5后引入（推荐）