ES6的模块化思想（export、import）

我就是我 2023-09-27 11:09 108阅读 0赞

最近在学习前端项目，然后碰到了export和import的思想，虽然在平时用起来感觉很方便，但是都是放着葫芦画瓢，没有真正去理解过这个东西！今天花了点时间去深入了解一下！！！

### （1）模块化思想 ###

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 的模块化分为导出（export） @与导入（import）两个模块。说白了，其实相当于后盾开发的各种对象的创建然后进行对象的各种引用！

### （2）ES6模块与CommonJS模块加载区别： ###

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。所以说ES6是编译时加载，不同于CommonJS的运行时加载(实际加载的是一整个对象)，ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式：  
以上这种写法与CommonJS的模块加载有什么不同？

当require path模块时，其实 CommonJS会将path模块运行一遍，并返回一个对象，并将这个对象缓存起来，这个对象包含path这个模块的所有API。以后无论多少次加载这个模块都是取这个缓存的值，也就是第一次运行的结果，除非手动清除。  
ES6会从path模块只加载3个方法，其他不会加载，这就是编译时加载。ES6可以在编译时就完成模块加载，当ES6遇到import时，不会像CommonJS一样去执行模块，而是生成一个动态的只读引用，当真正需要的时候再到模块里去取值，所以ES6模块是动态引用，并且不会缓存值。  
这里参考：原文链接：https://blog.csdn.net/weixin\_42169395/article/details/124314938

### （3）在实际开发中的应用： ###

![在这里插入图片描述][d0cbc6d38f9d42f491faa4aff2d7b3ec.png]

import {
         login, logout, getInfo } from '@/api/login'
    import {
         getToken, setToken, removeToken } from '@/utils/auth'
    
    const user = {
        
      state: {
        
        token: getToken(),
        name: '',
        avatar: '',
        roles: [],
        permissions: []
      },
    
      mutations: {
        
        SET_TOKEN: (state, token) => {
        
          state.token = token
        },
        SET_NAME: (state, name) => {
        
          state.name = name
        },
        SET_AVATAR: (state, avatar) => {
        
          state.avatar = avatar
        },
        SET_ROLES: (state, roles) => {
        
          state.roles = roles
        },
        SET_PERMISSIONS: (state, permissions) => {
        
          state.permissions = permissions
        }
      },
    
      actions: {
        
        // 登录
        Login({
         commit }, userInfo) {
        
          const username = userInfo.username.trim()
          const password = userInfo.password
          const code = userInfo.code
          const uuid = userInfo.uuid
          return new Promise((resolve, reject) => {
            login(username, password, code, uuid).then(res => {
              setToken(res.token)
              commit('SET_TOKEN', res.token)
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        },
    
        // 获取用户信息
        GetInfo({ commit, state }) {
          return new Promise((resolve, reject) => {
            getInfo().then(res => {
              const user = res.user
              const avatar = user.avatar == "" ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
              if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
                commit('SET_ROLES', res.roles)
                commit('SET_PERMISSIONS', res.permissions)
                localStorage.setItem('userInfo',JSON.stringify(res.user))
    
              } else {
        
                commit('SET_ROLES', ['ROLE_DEFAULT'])
              }
              commit('SET_NAME', user.userName)
              commit('SET_AVATAR', avatar)
              resolve(res)
            }).catch(error => {
        
              reject(error)
            })
          })
        },
        
        // 退出系统
        LogOut({
         commit, state }) {
        
          return new Promise((resolve, reject) => {
        
            logout(state.token).then(() => {
        
              commit('SET_TOKEN', '')
              commit('SET_ROLES', [])
              commit('SET_PERMISSIONS', [])
              removeToken()
              resolve()
            }).catch(error => {
        
              reject(error)
            })
          })
        },
    
        // 前端 登出
        FedLogOut({
         commit }) {
        
          return new Promise(resolve => {
        
            commit('SET_TOKEN', '')
            removeToken()
            resolve()
          })
        }
      }
    }
    
    export default user

在实际开发中，尤其是vue中我们用的特别多！！  
其实他的用法也很简单，易于理解！！  
在这里如果想要练习的话：  
推荐给大家有一个学习网站：（不是广告），因为我家就是在这里学的。  
https://www.runoob.com/w3cnote/es6-module.html

然后其实在这里总结一下export和export default的区别 、 as的用法  
（1）export和export default的区别 ：  
其实最大的区别就是export要求导入导出后的变量名字相同，export default则导出导出后的变量名字可有区别！原因就在于在一个文件或模块中，export、import 可以有多个，export default 仅有一个！！

![在这里插入图片描述][7860a9e8eb5042ffb7fc6dfcac897ac3.png]  
![在这里插入图片描述][652b52a8ff6045bc8a9420aaafc3ef4f.png]  
另外大家千万不要认为export default只能到处一个变量或者函数

![在这里插入图片描述][68cab110dc2e411e8dbc119436e32bb4.png]  
![在这里插入图片描述][2cffc83760e74bb1b4e9a2d9b8f8adbd.png]

![在这里插入图片描述][7bd06a6b352a466a95c843d8ddd2a96b.png]  
（2）另外就是as的用法，有时候我们可能会引用好几个js文件，但是js里面的函数名可能会与重复，因此我们就可以在import中利用as 给他换一个名字，这样就解决这个问题了！！！

惨痛案例：在不知道这个之前，我都是再额外复制一份js换个名字啥的，特别麻烦，还容易报错！！  
大家这个一定要记住！！！！  
![在这里插入图片描述][13f5900522af45e5900186cd556aef21.png]

[d0cbc6d38f9d42f491faa4aff2d7b3ec.png]: https://img-blog.csdnimg.cn/d0cbc6d38f9d42f491faa4aff2d7b3ec.png
[7860a9e8eb5042ffb7fc6dfcac897ac3.png]: https://img-blog.csdnimg.cn/7860a9e8eb5042ffb7fc6dfcac897ac3.png
[652b52a8ff6045bc8a9420aaafc3ef4f.png]: https://img-blog.csdnimg.cn/652b52a8ff6045bc8a9420aaafc3ef4f.png
[68cab110dc2e411e8dbc119436e32bb4.png]: https://img-blog.csdnimg.cn/68cab110dc2e411e8dbc119436e32bb4.png
[2cffc83760e74bb1b4e9a2d9b8f8adbd.png]: https://img-blog.csdnimg.cn/2cffc83760e74bb1b4e9a2d9b8f8adbd.png
[7bd06a6b352a466a95c843d8ddd2a96b.png]: https://img-blog.csdnimg.cn/7bd06a6b352a466a95c843d8ddd2a96b.png
[13f5900522af45e5900186cd556aef21.png]: https://img-blog.csdnimg.cn/13f5900522af45e5900186cd556aef21.png