ES6模块import、export

js 本身不支持模块化

在ES6之前，js社区制定了一些模块化的规范

     Commonjs 规范          主要用于服务器端    nodeJs   require("url")

     AMD  规范                   客户端。代表性的框架：requireJs,curIJs

     CMD规范                     客户端。代表性框架：seaJs           

ES6出来,它统一了服务端和客户端的模块规范 

   语法统一: import { xxx }  aaa

下面看一下ES6模块化的玩法 

定义模块-导出-export

     模块化，一般都是js文件,用 export 导出文件，语法 ：  export   导出的东西
       方式1：export  const A = 123
       方式2：export {  
            A,
            AA as BB    // 起别名        
       }

      方式3：export default  30

┌── module        // 模块文件夹
│   ├── a.js      // 模块文件 a
│   ├── b.js      // 模块文件 b
│   ├── c.js      // 模块文件 c
│   ├── d.js
│
├── index.html    // 主页面

-----------------------------------------------------------------------------------------------
a.js 文件
方法1:单个导出
export const A1 = 1
export const A2 = 11
export const A3 = 111

方法2：对象导出
const A1 = 1
const A2 = 11
const A3 = 111
export{
    A1,
    A2,
    A3
}
-----------------------------------------------------------------------------------------------
b.js 文件
方法3：别名导出（给导出的变量起别名）
const B1 = 2
const B2 = 22
const B3 = 222
export{
    B1 as B,
    B2 as BB,
    B3 as BBB
}
-----------------------------------------------------------------------------------------------
c.js 文件
方法4：对应下面 导入方法4
export default 20     

-----------------------------------------------------------------------------------------------
d.js 文件
方法5：多种格式导出，对应导入方法5，多种格式接受导入
export const D1 = 3
export const D2 = 33
export default 20  

使用模块-导入-import

注：导入外部模块，一定要在 script 标签里面使用，并且声明 script  type 类型为module

一定要服务器环境下运行

    
        
        
    
    
         
一定要在服务器环境中运行，否则报跨域错误
    
    

import特点：

    1.import 可以是相对路径，也可以是绝对路径

    2.import 无论引入多少次，模块只会导入一次，且实时更新的（模块数据后续更改了，主页面数据也会自动修改）

    3.import "./module/a.js"  相当于把整个文件引入

    4.import { A as AA }  from  "./module/a.js"          ---起别名导入

    5.import 有提升效果，会自动提到程序最前端首先执行

    6.import() 类似 node 里面的 require,可以动态的引入模块，返回的是一个promise对象。可以结合promise 和 异步函数使用

注：在ES6模块化中，自动默认就是严格模式 “use strict”，所以写代码的时候要遵循js语法的严格模式