vue 怎么全局到入常量_Vue 中如何定义全局的变量和常量(转)

17.6k 次阅读  ·  读完需要 10 分钟

7

Vue 中如何定义全局的变量和常量

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

尝试1:

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

let a = 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, 多简单的事情.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534098.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

revit找不到附加模块程序集_TensorFlow基础知识——常用模块(一)

1本节简述对于开展深度学习开发的目标而言,我们需要掌握的除了必要的深度学习理论基础、必要的开发依赖库基础知识、基本的开发套路之外,我们还需要掌握它常见的外围小帮手都有哪些。这些小帮手就是深度学习依赖库中的其他并不是核心的模块,但…

android搭建opencv开发环境,Android Studio搭建opencv开发环境

文章不配图片,阅读需要有Android开发基础并熟悉Android Studio。一、搭建基于Java开发环境以下内容介绍如何搭建基于Java jni的opencv开发环境。1、准备工作从opencv官网下载Android平台开发sdk并解压,假设解压后文件夹名为opencv-4.3.0-android-sdk。(此…

99 网络编程_网络工程师技能图谱,看看你会多少技能

技术推动了时代变革,互联网则加速了这场变革。在蓬勃发展的互联网浪潮下,网络作为基础设施的关键纽带保障着网路流量的顺利流通,维持着赛博世界的繁荣。而在这繁荣之下,生存着这样一个群体——网络工程狮,为网络纽带保…

python 3.8.0安卓_Python for Mac v3.8.0 官方最新版

Python for Mac是一款全新推出的编程工具,所有 python.org macOS 安装程序都附带了 OpenSSL 的内置副本。此外,还有一个针对 macOS 10.9 的新增安装程序变体,其中包含 Tcl / Tk 8.6的内置版本,有需要的朋友快来下载试试吧!Python …

线程join_Java 并发编程:线程间的协作(wait/notify/sleep/yield/join)

点击上方“Coder编程”,选择“置顶公众号”技术文章第一时间送达!并发编程.png每天进步一点,不做curd工程师与Api调用工程师 欢迎访问个人博客网站:https://www.coder-programming.cn/ 作者:liuxiaopeng | http://www…

4位先行进位电路 logisim_你真的了解74系列集成电路吗?让我帮你总结一下

74系列集成电路大致可分为6大类:74(标准型)74LS(低功耗肖特基)74S(肖特基)74ALS(先进低功耗肖特基)74AS(先进肖特基)74F(高速)HC为COMS工作电平;HCT为TTL工作电平,可与74LS系列互换使用HCU适用于无缓冲级的CMOS电路。这9种74系列产品&#xf…

android ios av tv,iOS使用AVPlayer制作战旗TvDEMO OC版

在视频教学中看到一个别人写的战旗TvDEMO写得很好,于是自己动手试着制作一个。效果如下图所示主界面竖屏播放横屏播放点击出现工具栏视频播放使用的是AVPlayer,具体的使用方式如下//---PlayView---_playView [[UIView alloc]init];_playView.frame CGRectMake(0, …

matlab 子图title的位置_matlab 画图基本介绍

1.在命令窗口输入命令时&#xff0c;可以不必每输入一条命令就按enter键执行&#xff0c;可以在输入几行后一同运行。方法是&#xff1a;换行时&#xff0c;只要在按住<shift>键的同时按<enter>键即可&#xff0c;否则matlab就会执行上面输入的所有语句。2.如何将数…

python程序打包成安卓app教程_Python打包方法基本应用方式介绍

Python编程语言是一款功能强大的免费开源的通用型计算机程序应用语言&#xff0c;对于经验丰富的开发人员来说&#xff0c;掌握这样一款语言在其程序开发中是一个比较重要的选择。我们今天就先来了解一下python打包方法的相关应用。 一、简介 py2exe是一个将Python脚本转换成wi…

android添加删除项目,编写android计算器添加删除按钮,出现很抱歉,XX项目已停止运行。...

这是删除按钮监听代码&#xff1a;//del 按钮的监听btnDel (Button) findViewById(R.id.delete);btnDel.setOnClickListener(new OnClickListener() {Overridepublic void onClick(View view) {btnDel.setOnClickListener(this);//短按//btnDel.setOnLongClickListener(this);…

二元一次方程有唯一解的条件_人教版初中数学七年级下册用适当方法解二元一次方程组公开课优质课课件教案视频...

解二元一次方程组---加减法一、教学目的&#xff1a;1&#xff0e;使学生掌握用加减法解二元一次方程组的步骤。2&#xff0e;熟练运用加减法解二元一次方程组。3&#xff0e;培养学生分析问题、解决问题的能力。二、教学重点、难点和关键&#xff08;一&#xff09;重点&#…

为什么从网页上打印怎们好像被缩放_全网最详细关于3D打印的zbrush技术

这个小教程旨在为刚开始对3D打印感兴趣的新人朋友提供一些快速上手小技巧&#xff0c;以便在zbrush中制作适合桌面FDM 3D打印的创作&#xff0c;本次小教程需要读者已经有一些zbrush基础知识。1设置系统单位导入1英尺的box&#xff0c;1英尺X1英尺X1英尺。一旦导入到场景中&…

android图片浏览远近,快图浏览编辑图片方法介绍_怎么编辑图片_3DM手游

既然是图片管理工具&#xff0c;那么快图浏览肯定也是少不了图片编辑功能的。如何使用快图浏览编辑图片呢&#xff1f;下面小编带来的详细的使用方法&#xff0c;有需要的小伙伴一起来看看吧&#xff01;编辑照片方法介绍&#xff1a;1.第一步&#xff0c;下载安装快图浏览&…

h5微信本地调试 vue_vueh5中使用微信sdk

微信官方sdk教程安装vue 微信sdk 使用NPM安装&#xff0c;不会的百度学npm install jweixin-module --save创建一个wxsdk.js 文件// 引入微信sdkvar jweixin require(jweixin-module);export default {//判断是否在微信中isWechat: function() {var ua window.navigator.user…

matlab 三维 作图 坐标轴_MATLAB学习——MATLAB中的三维绘图指令

2 基本XYZ立体绘图命令mesh和plot是三度空间立体绘图的基本命令&#xff0c;mesh可画出立体网状图&#xff0c;plot则可画出立体曲面图&#xff0c;两者产生的图形都会依高度而有不同颜色。下列命令可画出由函数形成的立体网状图: xlinspace(-2, 2, 25); % 在x轴上取25点 ylins…

说说python程序的执行过程_表示说的词语

展开全部1、奉劝 [ fng qun ] 释义&#xff1a;敬辞。郑重劝说62616964757a686964616fe58685e5aeb931333365653331。 造句&#xff1a;我们厌恶那些阴险的恶人&#xff0c;奉劝他们改恶为善&#xff0c;才能得到社会的原谅&#xff01; 2、劝告 [ qun go ] 释义&#xff1a;拿道…

HTML4基本编译原理,Stanford公开课《编译原理》学习笔记(1~4课)

课程里涉及到的内容讲的还是很清楚的&#xff0c;但个别地方有点脱节&#xff0c;任何看不懂卡住的地方&#xff0c;请自行查阅经典著作《Compilers——priciples, Techniques and Tools》(也就是大名鼎鼎的龙书)的对应章节。一. 编译的基本流程完整的编译的5个基本步骤包括lex…

rocketmq 消息指定_SpringBoot 整合 RocketMQ 如何实现消息生产消费?

有时候我们在使用消息队列的时候&#xff0c;往往需要能够保证消息的顺序消费&#xff0c;而RocketMQ是可以支持消息的顺序消费的。RocketMQ在发送消息的时候&#xff0c;是将消息发送到不同的队列中&#xff0c;然后消费端从多个队列中读取消息进行消费&#xff0c;很明显&…

mysql怎么看实例名_南方“中看不中吃”的前4名水果,莲雾只是垫底,你怎么看?...

水果很多人都喜欢吃&#xff0c;南方人可以说是最幸福的&#xff0c;因为南方的水果种类有很多种&#xff0c;而且水果的价格也很便宜&#xff0c;一年四季都能吃到便宜又好吃的水果&#xff0c;南方的很多水果&#xff0c;北方人可能都没有吃过&#xff0c;虽然南方的水果种类…

html页面怎么加向下滚动,如何使用jQuery向上或向下滚动页面到锚点?

如何使用jQuery向上或向下滚动页面到锚点&#xff1f;我正在寻找一种方法来包含幻灯片效果&#xff0c;当您单击页面上或下的本地锚点链接时。我想要一个你有这样一个链接的东西&#xff1a;link text, img etc.也许添加了一个类&#xff0c;所以你知道你希望这个链接是一个滑动…