es6的module学习 export和import

1.commonJS---服务器端 ，  AMD---浏览器端    ，es6-module通用

2.commonJS模块

 let {state, user} = require('fs');

   <==>等价于  

let _fs = require('fs'); 

//运行时加载，没办法在编译时做“静态优化”
let state = fs.state; 
let user = fs.user; 

3.es6模块不是对象，而是通过export命令来指定输出代码，import输入；不能处于块级作用域内

 //es6模块，编译时加载 或静态加载（在编译时就完成模块加载，但没办法引用es6模块本身（不是对象））
import { state, user } from 'fs' 

4.es6模块化采用严格模式
   顶层的this指向undefined, 而不是global

5.export  实质是，在接口名与模块内部变量之间，建立了一一对应的关系, 且值动态绑定关系
   commonJS区别：CommonJS是输出的缓存，无动态更新
 

//输出变量
//第一种export方式
export var m = 1;
   

//profile.js  ，第二种export方式
var name = "youyou";
var hobby = "yoga";
      
export{name, hobby}; 

//输出函数
export function multiply(x, y){    
   return x * y;
}
   
//as关键字重命名
function v1(){}
function v2(){}

export{
  v1 as streamV1,
  v2 as streamV2,
  v2 as otherfunction //重命名后，v2可以用不同的名字输出两次
}

6.import 命令有提升，首先执行（本质：import命令在编译阶段执行的）；
    import {name, hobby, hobby as myhobby} from './profile.js'    注意：不能再加载模块里，改写接口； eg: name ='nanpan' (报错，只能读取，不能修改)
    但如果name是一个对象，改写对象的属性是可以的；建议：不要轻易改属性，查错困难
   
    注意：静态执行， 不能使用表达式和变量
  

// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
   import { foo } from 'module1';
} else {
   import { foo } from 'module2';
}

    import执行的加载，重复的执行同一句import语句，只会执行一次
    import { foo } from 'my_module';
    import { bar } from 'my_module';

    // 等同于（对应同一个my_module的实例）
    import { foo, bar } from 'my_module';

    通过babel转码，CommonJS 和 es6的import的混用，最好不要这样做。因为import在静态解析阶段执行，
    所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

7.模块的整体加载 *
   import * from './circle';

8. export default命令， 为模块指定默认输出
   注意：此时的import命令就不使用大括号{}
         一个模块只能有一个export default
         输出的是一个叫做default的变量， 所以它后面不能跟变量声明

   // 正确
    var a = 1;
    export default a;

    // 错误
    export default var a = 1;

    // 正确
    export default 42;

    // 报错
    export 42;

9.模块之间的继承
  

  // circleplus.js

    export * from 'circle';
    // export *，表示再输出circle模块的所有属性和方法。注意，export *命令会忽略circle模块的default方法
    export { area as circleArea } from 'circle';

10，跨模块常量

    // constants.js 模块
    export const A = 1;
    export const B = 3;
    export const C = 4;

11.import() --按需加载； 条件加载 ； 动态的模块化路径
    import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

 ------------------------------------------------------------------------------------------------------------------个人声明：阮一峰老师教程的学习笔记