最近在学习前端项目,然后碰到了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换个名字啥的,特别麻烦,还容易报错!!
大家这个一定要记住!!!!