前端模块化-import和export的使用

前端模块化-import和export的使用

前端为实现模块化，减少代码复用，ES6中提出了export和import，专门用来模块化的导出和引入，export 和import是成对使用的，export导出的模块中是用严格模式的，保证导入的模块更加可靠，安全。

export（导出）

1. 命名导出: export  变量（可以多个）

   export const num = 23
   export const str = "23"
   export const bool = true
   export const function fun(){}
   export const obj = {}

    

2. 默认导出: export default 变量 （只能有一个， 后面的会覆盖前面的定义）

   export default a;
   export default b;
   // a 会被覆盖掉，导出是b

    

3. 关键字as：重命名处理

   export {variable1 as name1} ; //name1 就是暴露出去的variable1， 在import使用的是name1

    

4. 关键字form： 从整体中抽取

   export {name, age} from './user.js'; //从user.js中选出name，age进行导出

    

5. 关键字*： 表示一个整体

   export * from './user.js'; //导出整个用户集合

    

6. 支持解构导出

   export const {key1, key2:age} = o; //解构输入const key1,const age,接着再export

    

 

import（引入）

1. 在script标签使用时候，需要添加type="module"

   //另外不能在本地访问，需要起服务比如http-server
   <script type="module">
       import myModule from './my-module.js';
   </script>

    

2. 静态import：适合用来初始化加载文件，加载一次就完事了

   // 导入整个
   import user from './user.js'
   //导入单个，就是整个的属性或者方法
   import { name, age } from './user.js'
   // 同样支持as和*
   import * as user from './user.js'
   // 直接执行,没有返回值
   import './user.js'
   

    

3. 动态import：有需要时候才进行加载，比如vue-router的路由加载

   {
       path: 'login',
       name: 'login',
       component: () => import('@/views/login'),
       meta: {
         title: '登陆',
         icon: 'login'
           }
   }

    

4. nomodule：script标签的nomodule，兼容性处理，有些浏览器不支持

   <script type="module" src="./my-module.js"></script>
   <script type="nomodule" src="./call-back.js"></script>