js使用心得——避免全局变量冲突的小技巧
在写js代码的时候，经常会因为这样或者那样的原因用到全局变量，如果全局变量只在一个js里使用，那就没问题，但如果变量在不同的js文件里出现，这时隐藏的问题就会开始暴露，也许你能很快修复出现的BUG，又或许全无头绪。
先看下边的js文件test1.js
var a = 1,
b = 2,
c = a + b;//此时c的值为3
html代码如下：
<html>
<head>
</head>
<body>
<script src="test1.js"></script>
<script>
alert(c);//对话框显示3
</script>
</body>
</html>
上边的test1.js文件在单独使用的时候，毫无疑问，是正确的，c的值就是我们期望的3。但是经常会遇到一个项目由多个人来合作开发，然后另一个同事给网页加载另一个test2.js，代码如下：
var a = 3,
b = 4,
c = a + b;
修改后的html代码如下：
<html>
<head>
</head>
<body>
<script src="test1.js"></script>
<script src="test2.js"></script>
<script>
alert(c);//对话框显示7
</script>
</body>
</html>
也就是说，test1.js中的变量被test2.js中同名变量给覆盖了！如果声明的变量越多，那么变量冲突就越频繁，这会让我们在新增变量的时候都提心吊胆。那么，有什么解决方案吗？答案是肯定的，下边磨途歌将给大家介绍“变量命名空间”简单的使用方法。
更改后的test1.js代码：
var _test1 = {
a : 1,
b : 2,
c : 0
};
_test1.c = _test1.a + _test1.b;//此时c的值为3
更改后的test2.js代码：
var _test2 = {
a : 3,
b : 4,
c : 0
};
_test2.c = _test2.a + _test2.b;//此时c的值为7
修改后的html代码如下：
<html>
<head>
</head>
<body>
<script src="test1.js"></script>
<script src="test2.js"></script>
<script>
alert(_test1.c);//对话框显示3
alert(_test2.c);//对话框显示7
</script>
</body>
</html>
跟磨途歌一起分析上边的代码，不难发现，test1.js与test2.js代码中声明的变量分别使用当前的文件名加一个下划线来组成，例如编写test1.js文件，那么就在文件的开头声明一个全局变量。
var _test1 = {};
//然后在需要的时候往变量里添加需要的变量
//例如下边的使用方式
_test1.x = 1;
_test1.y = 2;
_test1.z = test1.x + test1.y;
因为磨途歌不可能在同一个目录创建两个test1.js文件，这样就很巧妙的避免了同名变量的出现。还要注意一点，就是ie跟火狐或谷歌是有差异的，比如下边的代码：
var _test1 = {
a : 1,
b : 2,
c : 0,
};
最后一个“c : 0,”声明后边加不加逗号，火狐浏览器跟谷歌浏览器都能解析，但是IE浏览器就不行,IE浏览器要求最后一个变量不能有逗号的出现，所以大家以后写代码，还是得照顾一下IE浏览器的固执，改成下边这么写：
var _test1 = {
a : 1,
b : 2,
c : 0
};
如果你正好遇上在火狐浏览器跟谷歌浏览器都能正常运行的js代码，但到了IE浏览器下就不工作了的情况，可以现在就检查一下，会不会就是这个逗号让IE浏览器不高兴了？
js使用心得——避免全局变量冲突的小技巧的更多相关文章
- HTML5+js页面传值给Java后台的小技巧
页面传值小技巧 平常我们在做的web项目,一般一个HTML页面上会有好几个步骤,step_num①,step_num②,step_num③,一般先显示step_num①,根据跳转条件显示step_nu ...
- js中关于数组处理的一些小技巧
1 reduce方法同时实现map和filter 假设现在有一个数组,然后遍历它的每一项(map的功能)然后筛选出其中的一部分(filter的功能).如果使用map和filter的话,我们需要遍历这个 ...
- 微信小程序js学习心得体会
微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...
- 客户端JS性能的一些优化的小技巧
下面是一些关于客户端JS性能的一些优化的小技巧:1.[顶]关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;). while().for(in).在这三种循环中 for(in) ...
- 由于js词法性质和全局变量被更改，循环绑定的click事件执行时变量和定义时 不一致的bug，各种解决方案。
由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该 ...
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02：Web管控平台后台架构 NetCore入门篇：（十一）NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
IT咨询顾问:一次吐血的项目救火 年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登 ...
- JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
- [转载]Js小技巧||给input type=“password”的输入框赋默认值
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...
- html/css/js小技巧实例
一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...
随机推荐
- Asp.NET CORE安装部署
先安装IIS再安装这两个,不然后面各种bug HTTP 错误 500.19 代码 0x8007000d 解决方案 for win7_64 asp.net core IIS Web Core 1.比如最 ...
- 初学者学习JavaScript的实用技巧！
Javascript是一种高级编程语言,通过解释执行.它是一门动态类型,面向对象(基于原型)的直译语言.它已经由欧洲电脑制造商协会通过ECMAScript实现语言标准化,它被世界上的绝大多数网站所使用 ...
- IP欺骗(XFF头等)
很多时候需要伪造一些http头来绕过WAF 1.X-Forwarded-For: 简称XFF头,它代表客户端,也就是HTTP的请求端真实的IP,只有在通过了HTTP 代理或者负载均衡服务器时才会添加该 ...
- 吴裕雄--天生自然MySQL学习笔记：MySQL 索引
MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是 ...
- Java并发分析—volatile
在https://www.cnblogs.com/xyzyj/p/11148497.html中已经说明了在多线程并发的情况下,会出现数据的不一致问题,但归根结底就是一个原因,在宏观上就是线程的执行顺序 ...
- day68-CSS-float浮动，clear清除浮动，overflow溢出
1. float 浮动 1.1 在 CSS 中,任何元素都可以浮动. 1.2 浮动元素会生成一个块级框,而不论它本身是何种元素.内联标签设置浮动,就变成了块级标签. 1.3 关于浮动的两个特点: 浮动 ...
- php速成_day1
一.概述 1.什么是PHP PHP ( Hypertext Preprocessor ),是英文超级文本预处理语言的缩写.PHP 是一种 跨平台.嵌入式的服务器端执行的描述语言,是一种在服务器端执行的 ...
- Tensorflow函数——tf.set_random_seed(seed)
设置图级随机seed. 依赖于随机seed的操作实际上从两个seed中获取:图级和操作级seed. 这将设置图级别的seed. 其与操作级seed的相互作用如下: 1.如果没有设置图形级别和操作see ...
- PAT Basic 1104 数字⿊洞 (20) [数学问题-简单数学]
题目 给定任⼀个各位数字不完全相同的4位正整数,如果我们先把4个数字按⾮递增排序,再按⾮递减排序,然后⽤第1个数字减第2个数字,将得到⼀个新的数字.⼀直重复这样做,我们很快会停在有"数字⿊洞 ...
- windows支持apache、mysql、php集成环境推荐wampserver3.2 64位版本
对英文不感冒的同学很容易下载到更新包,而且官方的下载速度很慢,此文件为官方原版下载,现在分享给大家. 链接:https://pan.baidu.com/s/1LYyJi6FddvkQQNrLp4L6W ...