Vue中定义全局变量与常量的各种方式详解


Posted in Javascript onAugust 23, 2017

前言

本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入.

尝试1:

创建 global.js 并且在其中定义

let a = 10;

在入口文件中引入 global.js

import './global.js'

在项目中使用:

a // 报错

发现报错了, a 并没有定义. 为什么?

这个涉及到模块作用域:

1 每一个 js 都相当于一个模块, 一个模块有自己的模块作用域.

意思就是说: 其中的变量方法, 都只在这个模块上面生效.

尝试2:

将变量放到 Vue.prototype 上面, 通过插件全局引入

创建 global.js, 这样写:

let a = 10;
export default {
 install () {
 Vue.prototype.$a = a;
 }
}

在 入口文件中引入:

import G from './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 对象上面.

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

更新版本:

你这样用之后, 所有的变量/常量都绑定在 window 对象上面, 很容易就和已经存在 window 对象上面的变量冲突, 所以要收敛你的行为, 这样:你先在window 对象上面设置一个属性, 属性值是一个对象, 比如这样:

window.key = {};

然后将你所有需要设置的全局变量, 方法, 都放到 window.key 里面而不是 window 上面.

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

更近一步, 可以让这个 key 的名字为 _const 或者 _var, 或者让用户自己控制这个变量的名字.

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

现在大致已经可以了, 然后你要解决一下, 如果重复调用 'bindToGlobal' 后面的会覆盖掉前面所定义的 变量/常量, 而我们要的是 追加, 不是覆盖, 所以代码做个调整:

let bindToGlobal = (obj, key='var') => {
 if (typeof window[key] === 'undefined') {
 window[key] = {};
 }
 
 for (let i in obj) {
 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, 多简单的事情.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
JS块级作用域和私有变量实例分析
May 11 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 #Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 #Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 #Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 #Javascript
vue中页面跳转拦截器的实现方法
Aug 23 #Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 #Javascript
You might like
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php基本函数汇总
2015/07/09 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
JS验证不重复验证码
2017/02/10 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
Node.js简单入门前传
2017/08/21 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python列表解析配合if else的方法
2018/06/23 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
jupyter notebook清除输出方式
2020/04/10 Python
Python转换字典成为对象,可以用"."方式访问对象属性实例
2020/05/11 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
同意转租证明
2015/06/24 职场文书
初级职称评定工作总结
2015/08/13 职场文书
golang中的空slice案例
2021/04/27 Golang
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python