es6模块化

es6模块化

怎么使用es6模块 ?
esModule模块 (es6) 和 commonjs模块 (node模块)
— es6（静态导入：不能在作用域中导入）
import…from …导入
import …有副作用的导入（可以让文件执行 但是没有使用这个文件中的内容）
export—导出
export default–导出具体值 每个文件都是一个模块
— commonjs模块（动态导入）
可以在作用域中导入，例：if(…){ require(XXXX)}

import--导入 export---导出
// a模块
let a = 1; // 导出a变量 （接口）
let b = 2;
let h = 'hello'
setInterval(()=>{
    a++
},1000)
export {    //不能写成对象格式
	b,
    a as c, // as 就是起别名
}
// b模块
import {c,b} from './a';
setInterval(() => {
    console.log(c,b); // 每次获取的值都会随着接口中的内容变化而变化
}, 1000);
// c模块
import * as obj from './a';   // 可以将所有属性收集到obj对象中
obj.c
obj.b

import--导入 export default--导出具体值
// a模块
export default 'hello';
// b模块
import c from './a';    
console.log(c)   // hello

import--导入 export---导出 export default--导出具体值
let a = 1; // 导出a变量 （接口）
let b = 2;
let h = 'hello'
export {    //不能写成对象格式
	a，
	b,
	c as default // 相当于 export default c
}
export default h
// b模块
import c,h,{a,b} from './a';

合并导出
//a模块
let a = 1; 
export {   
	a，
}
//b模块
let b = 2;
export {   
	b，
}
//c模块 合并导出
export * from './a';
export * from './b';
// d
import * as obj from './c'

// 动态导入 可以在作用域中使用
let btn = document.createElement('button');
btn.addEventListener('click',function(){
    // import语法返回的是一个promise
    import('./file').then(data=>{
        console.log(data);
    });// 动态的使用jsonp加载一个新的文件
})
document.body.appendChild(btn);