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 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
基于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
提取HTML标签
2006/10/09 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
ES6入门教程之Array.from()方法
2019/03/23 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python SQLite3简介
2018/02/22 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
复核员上岗演讲稿
2014/01/05 职场文书
丧事主持词大全
2014/04/02 职场文书
历史学专业求职信
2014/06/19 职场文书
解除同居协议书
2015/01/29 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书