模块化
模块化概念:将若干份小的js文件合并在一起
小的js文件需要暴露内容
总js文件需要引入模块
表现形式:js中引入其他的js文件
作用:简化html结构,增加代码的独立性和复用性
第一种暴露方式:
export let ok = 1;
export let add = function(a,b){
return a+b;
}
引入模块:
<script type = "module">
import * as m1 from './js/module1.js'
console.log(m1.add(1,2));
</script>
结果:
第二种暴露方式:集中式暴露
let yes = 2;
let getName = function(){
return 'cege';
}
export{yes,getName};
引入模块:
1.
<script type = "module">
import * as m2 from './js/module2.js'
console.log(m2);
</script>
结果:
2.
<script type="module">
import {getName} from './js/module2.js'
console.log(getName());
</script>
第三种暴露方式:默认暴露
let add1 = function(){
return a+b;
}
class Ball{
constructor(){}
}
export default{
add1,Ball
}
引入模块:
1.
<script type="module">
import * as m3 from './js/module3.js'
console.log(m3.default);
</script>
2.
<script type="module">
import {default as ok} from './js/module3.js'
console.log(ok);
</script>
3.简洁表示(只适用于默认暴露,其他方式则会报错)
<script type="module">
import m from './js/module3.js'
console.log(m);
</script>
结果:
如果同时要用三个模块,上述方法太麻烦,所以最好只引入一个模块,使用外部样式
引入:
<script type="module" src="js/app.js"></script>
外部样式:
import * as m1 from './module1.js'
import {getName} from './module2.js'
import m3 from './module3.js'
console.log(m1,getName(),m3);
输出结果: