js不支持模块化
注意: 需要放到服务器环境
1、如何定义模块?
export 东西
例:1.js文件中
javascript
console.log('1模块加载了');//显示是否加载了
export const a =12;
export const b = 5;
export let c = 101;
javascript
const a=12;
const b=5;
const c=101;
export {//可以起别名 as *** 也可以去掉
a as aaa,
b as banana,
c as cup
}
javascript
<script type="module">
import {a, b, c} from './modules/1.js';
console.log(a,b,c);
</script>
起别名版import :
javascript
<script type="module">
import {aaa, banana, cup} from './modules/2.js';
console.log(aaa, banana, cup);
</script>
补充 export default ** 作用:引用时候可以不用加{ }
2、如何使用?
在html文件里<script type="module"></script>
引入模块
import './modules/1.js';
【新增】*表示引用全部
javascript
<script type="module">
import * as modTwo from './modules/2.js';
console.log(modTwo.aaa);
</script>
javascript
<script type="module">
import mod,{show, sum, a, b} from './modules/4.js';
// show sum 是函数
let p1 = new mod.Person('老肖');
console.log(p1.showName());
show();
sum();
console.log(a,b);
</script>
js文件可以引用另一个js文件里的东西 :格式同理
import: 特点
a). import 可以是相对路径,也可以是绝对路径
import 'https://code.jquery.com/jquery-3.3.1.js';
b). import模块只会导入一次,无论你引入多少次
c). import './modules/1.js'; 如果这么用,相当于引入文件
d). 有提升效果,import会自动提升到顶部,首先执行
也就是说:不管放前面放后面都最先引入
e). 导出去模块内容,如果里面有定时器更改,外面也会改动
import() 类似node里面require, 可以动态引入, 默认import语法不能写到if、for之类里面
错误例:
javascriptif(a==12){ import {a} from './modules/1.js'; }else{ import {b} from './modules/2.js'; }
正确例:
返回值是个promise对象
javascript<script type="module"> import('./modules/1.js').then(res=>{ console.log(res.a+res.b); }); </script>
路径也可以动态
javascript<script type="module"> let sign=1; function config(){ switch(sign){ case 1: return './modules/1.js'; break; case 2: return './modules/2.js'; break; } } import(config(1)).then(res=>{ $(function(){ $('body').css({ background:'gray' }) }) }); </script>
与promise结合版:
javascript<script type="module"> Promise.all([ import('./modules/1.js'), import('./modules/2.js') ]).then(([mod1,mod2])=>{ console.log(mod1); console.log(mod2); }) </script>
【ES2017】async await