Vue中定义全局变量与常量的各种方式详解
前言
本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：
我想要定义一个变量,在项目的任何地方都可以访问到,不需要每一次使用的时候,都引入.
尝试1:
创建global.js并且在其中定义
leta=10;
在入口文件中引入global.js
import'./global.js'
在项目中使用:
a//报错
发现报错了,a并没有定义.为什么?
这个涉及到模块作用域:
1每一个js都相当于一个模块,一个模块有自己的模块作用域.
意思就是说:其中的变量方法,都只在这个模块上面生效.
尝试2:
将变量放到Vue.prototype上面,通过插件全局引入
创建global.js,这样写:
leta=10;
exportdefault{
install(){
Vue.prototype.$a=a;
}
}
在入口文件中引入:
importGfrom'./global' Vue.use(G);
在项目中使用:
this.$a
的确可以,但是这样的方式并不好,在任何this不指向Vue的地方,你都没有办法使用这个变量.
尝试3:
将变量放到window对象上面
创建global.js
window.a=10;
在入口文件中引入
import'./global.js'
在项目中使用:
a
可行,这种方式只要你能访问到window对象,就能访问到这个变量.
有什么缺点吗?
暂时没有发现.
实际的场景分析:
在实际情景上,你可能拥有一份配置,比如说微信公众号开发的时候,你有一份配置,写着
appId和appKey,希望可以全局访问到.
按照上面的讨论,你应该这么写:
global.js
window.appId=123; window.appKey='abc';
可以很明显的看到,一旦你要定义的变量或者常量过多,就能疯了.
所以我们希望有一种方式,我们定义还是按照自己的方式定义:
appId=123; appKey='abc';
然后有一个方法fn,可以将这两个参数,直接绑定到window对象上面
fn(appId,appKey);
结果就是appId,appKey都会被绑定到window对象上面.
实现:
你需要传递一个对象给方法fn,fn负责将这个对象中的每一个key都绑定到window对象上面.
letbindToGlobal=obj=>{
for(letkeyinobj){
window[key]=obj[key]
}
}
更新版本:
你这样用之后,所有的变量/常量都绑定在window对象上面,很容易就和已经存在window对象上面的变量冲突,所以要收敛你的行为,这样:你先在window对象上面设置一个属性,属性值是一个对象,比如这样:
window.key={};
然后将你所有需要设置的全局变量,方法,都放到window.key里面而不是window上面.
letbindToGlobal=obj=>{
window.abc={};
for(letkeyinobj){
window.abc[key]=obj[key]
}
}
更近一步,可以让这个key的名字为_const或者_var,或者让用户自己控制这个变量的名字.
letbindToGlobal=(obj,key='var')=>{
window[key]={};
for(letiinobj){
window[key][i]=obj[i]
}
}
现在大致已经可以了,然后你要解决一下,如果重复调用'bindToGlobal'后面的会覆盖掉前面所定义的变量/常量,而我们要的是追加,不是覆盖,所以代码做个调整:
letbindToGlobal=(obj,key='var')=>{
if(typeofwindow[key]==='undefined'){
window[key]={};
}
for(letiinobj){
window[key][i]=obj[i]
}
}
到这里已经结束了.
最后对'bindToGlobal'做一个修改,使得你以后使用的时候比较简单方便一点
讨论一下:
虽然开放了绑定在window对象上面的对象的名字,但是你是不是就可以随便起名字?
假设你有两份配置,都是常量,
一份是http.js,配置了全局请求的域名
一份是wexin.js配置了公众号里面的一些appId,appkey
你是这样绑定呢:
bindToGlobal(http,'_http'); bindToGlobal(wexin,'_wexin');
这样访问:
_http.host _wexin.appId
还是按照它是常量还是变量去绑定:
bindToGlobal(httpConfig,'_const'); bindToGlobal(wexin,'_const');
这样访问:
_const.host; _const.appId;
前者语义上面肯定是优秀的,但是我考虑的不是这么一个点:
1、如果有新人要来维护你的代码,他想访问一个常量,要先知道你定义的常量的名字是什么,比如知道了是'wexin',然后再知道那个变量的名字是啥,比如说appId,这个时候才能访问:
wexin.appId;
而如果你统一都是用'_const',他只要去配置文件里面看下名字是appId,就可以这么用
_const.appId;//over
也就是说牺牲语义,换来维护简单一点.
试想如果追求语义,你分的非常细,定了七八个key。
2、记忆上面的问题,未来的你,放了几个月再来维护的时候,或者某天你搞这个项目都搞的要吐了,新访问一个变量的时候,还要想一下key名字,怂.
而统一_const.appId,多简单的事情.
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。