ES6的模块化历史

ES6模块化开发历史

js不支持模块化
一些支持模块化开发的语言
ruby require
python import

ES6之前，社区制定一套模板模块化规范：
Commonjs 主要用于服务器 nodejs require('http')
AMD requirejs, curljs
CMD sealJs

由于社区大量使用模块化,加上各个模块化的语法很多差异
所以ES6的模块化开发就诞生了 开始统一规范

但是ES6还未能完全统一规范

所以现在我们先学习下如果 模块化开发：

模块化使用：【重点】
模块化:
a.如何定义模块？
export 关键字

export let a=1;
export let b=2;
可以导出多次

导出是可以起别名
export {
a as aaa,
b as bbb
}

导入时也可以起别名
import {aaa as a,bbb as b}
//可以简化的导入所有
import * as allexport from 'xx,js'
console.log(allexport); 
b.如何使用模块？
import 关键字 
// JS 中的require 和 import 区别 看此链接https://www.cnblogs.com/liaojie970/p/7376682.html

import特点：
1.impot可以是相对路径，也可以是绝对路径
2.import模块只会导入一次，无论你引入多少次
3.import './modules/1.js' //相当于引入一个文件
【重点】 4.import会做提升,不管import写在哪里,会先别放在最上边执行
例子:
console.log(a,b);//只要本文件中有导入的a,b就能执行
import {a,b} from 'xx.js'
【重点】 5.import导入模块内容是,如果被导入的模块内部的变量修改了,这边会更新,就是这么给力,就是这么劲爆

【重点】 6.由于第四条原因所有不能够动态引入,即不能写在if()类似的条件块中,会报错
可以用import() 动态导入, 类似nodejs中的require,

例子： //可以通过这种方式动态调用 jq
import('https://code.jquery.com/jquery-3.3.1.min.js').then(res=>{// import()返回的是一个Promise对象
$(function(){
$('body').css({
background:'green'
})
})
});
优点：
1.按需求加载
2.可以写在if条件块中
3.路径可以动态拼接或计算出来
【重点】 6.续 import()返回的是一个Promise对象，所以可以用Promise内的一些方法
例子：
Promise.all([
import('./1.js'),
import('./2.js'),
]).then([mod1,mod2]=>{
console.log(mod1);
console.log(mod2);
})

【扩展】async function main(){
const mod1 = await import('./1.js');
const mod2 = await import('./2.js');
console.log(mod1,mod2);
//这两种方式基本差不多 //虽说async 和 await还没看呢 但是大概意思差不多

//用Promise.all()或的返回值并解构
const [m1,m2] = await Promise.all([
import('./1.js'),
import('./2.js')
]);
console.log(m1,m2);
}