在写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使用心得——避免全局变量冲突的小技巧的更多相关文章

  1. HTML5+js页面传值给Java后台的小技巧

    页面传值小技巧 平常我们在做的web项目,一般一个HTML页面上会有好几个步骤,step_num①,step_num②,step_num③,一般先显示step_num①,根据跳转条件显示step_nu ...

  2. js中关于数组处理的一些小技巧

    1 reduce方法同时实现map和filter 假设现在有一个数组,然后遍历它的每一项(map的功能)然后筛选出其中的一部分(filter的功能).如果使用map和filter的话,我们需要遍历这个 ...

  3. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  4. 客户端JS性能的一些优化的小技巧

    下面是一些关于客户端JS性能的一些优化的小技巧:1.[顶]关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;). while().for(in).在这三种循环中 for(in) ...

  5. 由于js词法性质和全局变量被更改，循环绑定的click事件执行时变量和定义时 不一致的bug，各种解决方案。

    由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该 ...

  6. IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02：Web管控平台后台架构 NetCore入门篇：（十一）NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题

    IT咨询顾问:一次吐血的项目救火   年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登 ...

  7. JS处理事件小技巧

    今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...

  8. [转载]Js小技巧||给input type=“password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

  9. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

随机推荐

  1. 13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式

    1. redux 简述 当 store 内的 数据进行变更的时候  多个组件感知到 store 内的数据变化 将会被自动更新 2. redux 工作流 Store  代表数据存储 (例如: 图书馆管理 ...

  2. PAT-树-DFS-BFS相关问题解决方案整理

    如何建树? 二叉树-建树-方式一 dfs使用root左右指针建立树节点关系,返回根节点root 二叉树-建树-方式二 dfs使用二维数组,int nds[n][2],如:nds[i][0]表示i节点的 ...

  3. 【转帖】使用容器化和 Docker 实现 DevOps 的基础知识

    使用容器化和 Docker 实现 DevOps 的基础知识 https://www.kubernetes.org.cn/6730.html 2020-02-24 15:20 灵雀云 分类:容器 阅读( ...

  4. [Python Cookbook]Pandas: How to increase columns for DataFrame?Join/Concat

    1. Combine Two Series series1=pd.Series([1,2,3],name='s1') series2=pd.Series([4,5,6],name='s2') df = ...

  5. iOS 通过有alpha值的图片创建蒙版

    @interface ViewController () @property (nonatomic, weak) IBOutlet UIImageView *imageView; @end @impl ...

  6. java求两个圆相交坐标

    最近由于项目需要,根据两个圆函数求出相交的坐标.实现代码如下,另感谢两圆求交点算法实现Java代码,虽然他所贡献的代码中存在问题,但仍有借鉴意义. 1.两个圆相交的数学求法 在中学数学中我们知道,一个 ...

  7. 专业程序设计part1

    7 专业程序设计 (有多少人在大学里学到了自己真正喜欢的专业??并在此专业上获得了升华??)i== 软件图标下载网址:easyicon 01thu 4邻域 8邻域 D邻域 是啥 像素间的连通性,是转为 ...

  8. UML-领域模型-例子与总结

    1.pos处理销售,示例 2.结论 1).每次迭代中,画概念模型只需要30分钟左右.避免瀑布思维. 2).在细化阶段开始构建概念模型

  9. win32框架

    win32的框架 1.入口函数 2.窗口注册类信息 3.窗口创建 4.显示窗口 5.更新窗口 6.消息循环 7.入口函数结束 WNDCLASSEX wcex;窗口类结构 wcex.cbSize = s ...

  10. 复杂json解析方式[GsonFormat]

    针对开发人员来讲,善于用工具,事半功倍. 干货: 1.IntelliJ IDEA 通过GsonFormat插件将JSONObject格式的String 解析成实体 插件地址:https://plugi ...