es6模块化

关于es6模块化，javascript一直没有自己的模块体系(module),无法将一个大程序拆分成互相依赖的文件，再用简单的方法拼装起来.模块主要分为几种:

1. commonJs 比如node.
2. cmd seajs amd requirejs
3. umd通用模式，该模式主要用来解决Commonjs模式和amd模式代码不能通用的问题，并同时害支持老师的全局变量问题.
4. 模块化可以解决命名冲突 采用函数自执行方式、解决代码的高内聚低耦合问题

commonjs node

//a.js
let a=1;
module.exports=a

//js
let c=require('./a.js')
console.log(c) //1

//b.js
const name='github'
module.exports={
    name,
    github:'commonjs'
}
//js
const {name,github}=require('./b.js')

ES Module

ES Module(ESM)是 Javascript 官方的模块化系统.

1.目前有很多浏览器不支持.
2.它同时兼容在node环境下运行.
3.模块的导入导出,通过import和export来确定.
4.ES Modules输出的是值得引用，CommonJS输出的是值的拷贝.
5.ES Module模块编译时执行，CommonJS模块总在运行时加载.

//a.js
export let a=1;

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

import的特点:
1.存在变量提升，可以在没有定义前直接使用.
2.不能放到作用域下，只能放到顶层环境.

//a.js
export let a=1;

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

{
 import {a} from './a.js' //error
}

普通导出

// a.js
//导出第一种方式
export let a=1;
export let b=2;
//导出第二种方式
let a=1;
let b=2;
export {a,b} // 导出的是变量不是具体的值

//js
import {a,b} from './a.js'

//导出的是变量不是具体的值
//c.js
export let c=1;
setInterval(()=>{
   c++
},1000)

//js
import {c} from './c.js'
setInterval(()=>{
   console.log(c)
},1000)
//结果
//1
//2
//3
//...

as别名(重命名)

//a.js
export let a=1;
export let b=2;

//js
//将a文件的所有东西，当做obj的属性导入
import * as obj from './a.js'； //解决 import {a,b,} from './a.js';
//使用 
console.log(obj.a) //1

//c.js
export function sum(a,b){
     return a+b
}
export { sum as add } 
//js
import {add} from './c.js'
add(1,2)
//也可以重命名引入
import {add as sum} './c.js'
sum(1,2)

导出默认值default

一个js文件只能有一个 export default

//b.js
let obj={a:1,b:2};
export {
     obj as default  //等同于 export default obj
}
//js
import obj from './b.js';


//a.js
let a=1;
export default a;
//js
import a from './a.js' 
console.log(a)

//可以直接导出某个变量
//c.js
export default {a:1,b:2}

//js
import * as obj from './c.js';
//使用
console.log(obj.default.a)

//或者
import obj from './c.js'
//使用
console.log(obj.a)

//或者
import {a,b} from './c.js'
//使用
console.log(a)

//或者 
import {default as c} from './c.js'
console.log(c.a)

整合导出

//x.js
export let x=1;
//y.js
export let y=2;
export let z=3

//普通第三.js文件整合需要这样引入导出,如果文件多需要手动导出
import {x} from 'x.js'
import {y,z} from './y.js'
export {x,y,z}

//整合导出立即导出 在中转文件中不能使用这两个文件的内容 因为被立即导出了
export * from './x.js'  //将所有x文件内容引入导出.
export {y} from './y.js'  //{导出某个变量}  将y.js文件只导出了y变量

import(懒加载)

let btn=document.createElement('button');
btn.addEventListenner('click',function(){
   //import()语法 返回的是一个promise,我们可以拿到结果中的default 就是默认导出的结果
  // import * as res from './'
   import('./d').then((res)=>{   //默认导出在default上 可以解构赋值 ({default:def})
      console.log(res.default)
      //.then(({default:def}))
      console.log(def)
   })
})

document.body.appendChild(btn)