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

最近在学习前端项目，然后碰到了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）在实际开发中的应用：

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 仅有一个！！

另外大家千万不要认为export default只能到处一个变量或者函数

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

惨痛案例：在不知道这个之前，我都是再额外复制一份js换个名字啥的，特别麻烦，还容易报错！！
大家这个一定要记住！！！！