方法都要求掌握)"/>
ES模块化的导入导出(所有方法都要求掌握)
ES模块化的导入导出
首先,我们需要在HTML代码中引入两个js文件,并且类型需要设置为module
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
export基本使用:
export指令用于导出变量
1.导出方式一:
export {flag,sum,}
2.导出方式二:
export var num1=1000;
export var height=1.88;
在某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名,这个时候就可以使用export default
需要注意:
export default在同一个模块中,不允许同时存在多个,只能有一个
import指令用于导入变量:
import {flag,sum} from "./aaa.js";
如果希望某个模块中所有的信息都导入,一个个导入显然有些麻烦
通过 * 可以导入模块中所有的export变量
但是通常情况下我们需要给 * 起一个别名,方便后续的使用
导出的方式集合:
var name='小明';
var age=18;
var flag=true;function sum(num1,num2) {return num1 + num2;
}if(flag){console.log(sum(20,30))
}
//1.导出方式一:
export {flag,sum,}//2.导出方式二:
export var num1=1000;
export var height=1.88;//3.导出函数/类
export function mul(num1,num2) {return num1 + num2;
}export class Person{run(){console.log('早航海')}
}//4.export default
const address='北京市';
export default address
导出的方式集合:
//1.导入的{}中定义的变量
import {flag,sum} from "./aaa.js";if(flag){console.log('小明是天才');console.log(sum(20,30))
}
//2.直接导入export定义的变量
import {num1,height} from "./aaa.js";console.log(num1)
console.log(height)//3.导入export的function、class
import {mul,Person} from "./aaa.js";console.log(mul(10,1))const p=new Person();
p.run();//4.导入export default中的内容
import addr from "./aaa.js"console.log(addr)//5.统一全部导入
import * as aaa from "./aaa.js"
console.log(aaa.flag)
console.log(aaa.height)
更多推荐
ES模块化的导入导出(所有方法都要求掌握)
发布评论