配置全局变量

原创已于 2022-05-25 09:11:47 修改 · 1.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2022-05-23 22:35:53 首次发布

本文介绍了如何在JavaScript中创建全局变量，通过创建一个名为global.js的文件，定义一个对象并将其绑定到window对象上，以实现全局引用。通过示例展示了如何使用bindToGlobal函数将对象的属性绑定到window的一个属性下，确保不会与其他变量冲突，并可以多次调用。最后，将global.js导入main.js，全局变量即可在项目中使用。

前言

如何添加全局变量

首先创建global.js，然后在该文件中创建一个对象

const url ={
	url:'www.baidu.com'
	phone:'8277056'
} ;

然后将这个对象中的变量绑定到window上，为了防止定义的变量与window对象上的变量冲突，我们可以先给window设置一个属性，这个属性是个对象，之后将变量全部放到这个对象上，例如：

window.key = {}

let bindToGlobal = obj => {
 window.k= {};
 for (let key in obj) {
 window.k[key] = obj[key]
 }
}

之后可以让这个 key 的名字为 _const 或者 _var, 或者其他的一些名字

let bindToGlobal = (obj, key='var') => {
 window[key] = {};
 for (let i in obj) {
 window[key][i] = obj[i]
 }
}

如果我们多次调用这个方法，后面的会覆盖掉前面的，所以要修改一下，
加个判断，让这个绑定到window上的对象为undefined的时候才会绑定对象，不然就只循环

let bindToGlobal = (obj, key='var') => {
 if (typeof window[key] === 'undefined') {
 window[key] = {};
 }
 
 for (let i in obj) {
 window[key][i] = obj[i]
 }
}

const url = {
	url:"www.baidu.com",
	phone:"8277056"
}
window.key = {};
let bindToGlobal = (obj, key='var') => {
 if (typeof window[key] === 'undefined') {
 window[key] = {};
 }
 
 for (let i in obj) {
 window[key][i] = obj[i]
 }
}
bindToGlobal(url,'_url')

然后将global.js导入main.js文件中，就可以全局引用了

//导入main.js
import Global from '@/common/global.js'
Vue.use(Global);
//使用
_url.url
_url.phone

总结

本文简单的介绍了全局变量的定义和使用，希望对大家有所帮助

标签

#javascript #vue.js #前端