前端模块化-import和export的使用
前端为实现模块化,减少代码复用,ES6中提出了export和import,专门用来模块化的导出和引入,export 和import是成对使用的,export导出的模块中是用严格模式的,保证导入的模块更加可靠,安全。
export(导出)
- 命名导出: export 变量(可以多个)
export const num = 23 export const str = "23" export const bool = true export const function fun(){} export const obj = {}
- 默认导出: export default 变量 (只能有一个, 后面的会覆盖前面的定义)
export default a; export default b; // a 会被覆盖掉,导出是b
- 关键字as:重命名处理
export {variable1 as name1} ; //name1 就是暴露出去的variable1, 在import使用的是name1
- 关键字form: 从整体中抽取
export {name, age} from './user.js'; //从user.js中选出name,age进行导出
- 关键字*: 表示一个整体
export * from './user.js'; //导出整个用户集合
- 支持解构导出
export const {key1, key2:age} = o; //解构输入const key1,const age,接着再export
import(引入)
- 在script标签使用时候,需要添加type="module"
//另外不能在本地访问,需要起服务比如http-server <script type="module"> import myModule from './my-module.js'; </script>
- 静态import:适合用来初始化加载文件,加载一次就完事了
// 导入整个 import user from './user.js' //导入单个,就是整个的属性或者方法 import { name, age } from './user.js' // 同样支持as和* import * as user from './user.js' // 直接执行,没有返回值 import './user.js'
- 动态import:有需要时候才进行加载,比如vue-router的路由加载
{ path: 'login', name: 'login', component: () => import('@/views/login'), meta: { title: '登陆', icon: 'login' } }
- nomodule:script标签的nomodule,兼容性处理,有些浏览器不支持
<script type="module" src="./my-module.js"></script> <script type="nomodule" src="./call-back.js"></script>