JavaScript防止全局变量污染的方法总结


Posted in Javascript onAugust 02, 2018

本文实例讲述了JavaScript防止全局变量污染的方法。分享给大家供大家参考,具体如下:

javaScript 可以随意定义保存所有应用资源的全局变量。但全局变量可以削弱程序灵活性,增大了模块之间的耦合性。

在多人协作时,如果定义过多的全局变量 有可能造成全局变量冲突,也就是全局变量污染问题,以下是两种解决办法

一. 定义全局变量命名空间

只创建一个全局变量,并定义该变量为当前应用容器,把其他全局变量追加在该命名空间下

var MY={};
my.name={
  big_name:"zhangsan",
  small_name:"lisi"
};
my.work={
  school_work:"study",
  family_work:"we are"
};

二 . 利用匿名函数将脚本包裹起来

(function(){
  var exp={};
  var name="aa";
  exp.method=function(){
    return name;
  };
  window.ex=exp;
})();

前言

记得long long ago,刚刚开始写JS的时候,我喜欢写一些函数在JS文件里边,然后通过script标签引进来,在DOM节点上绑定onclick等事件,看了很多人写的代码,也大多是这样。

后来会发现,当项目小的时候这么做为了快速开发是可以接受的,然而当很多人一起开发一个Javascript大应用的时候,你会发现不同的代码风格跟全局变量会导致很多冲突,这是一个很痛苦的事情。

曾经的经历

用过jQuery的人就知道其主要的变量符号就是$,没错!因此很多项目的开发人员也要学,就自己把$定义成别的含义了,我心里对其是无敌的鄙视跟厌恶。

我曾经拿过一个项目使用jQuery的,然后上头要我使用一个已有的富文本编辑器,这样就有两个JS文件了

jquery.js和editor.js,于是我要开始写该页面的逻辑了,我发现editor.js里边自定义了$符号,我原本想要把它直接替换成别的标志符,但是悲剧的是,它还有一些插件也会用到,混乱的结构导致我花了很多时间去解决这个冲突。

全局Window

我们都知道,在文件中直接定义的变量跟函数(不嵌套在任何域底下的)都是属于全局的,也就是都在当前页面的window变量底下。例如:

JS代码

function test1(){
}
var name;
function test2(){
  i = 1;
}

上边代码中的name,test1,test2和i都是属于window底下的全局变量,也就是可以通过以下三种办法访问到它们:

1.直接访问name,test1()等;

2.使用window["name"], window['test1']()等;

3.使用window.name,window.test1()等。

注意:上边代码中的i虽然是在test2函数里边才出现的,因为其前面没有使用var关键字,解释器会认为它在test2的上一层定义的,依次查找上一层,直到找到window全局,如果发现还是未定义,那么将其挂在window底下成为了全局变量。

所以你直接定义的函数通通都挂到了window底下,这就是一种污染了,当很多人定义各种变量跟函数,你又得同时引入进来的时候,这个冲突的概率就变大了。

减少污染

那为了避免过多这样的冲突,以及模块之间的耦合性更低,需要减少这样的污染。

此时我们会想,那不要把变量定义在全局呗,采用类似C++的命名空间,Java的包的思路就行啦。

首先就是将不同的模块划入到不同的全局“包”(这里的包的概念实际上就是一个Javascript对象而已)。

例如,程序员A为全局添加一个A变量,然后他把自己定义的函数/变量全部挂到A底下,这样就跟程序员B所定义的隔离了。

再者我们可以使用函数域来隔离一些局部变量的冲突,比如说程序员A写的代码如下:

JS代码:

(function(obj){
  /* 在这里边就与外边隔离了,定义的局部变量不会与外界干扰 */
  /* 为了跟外界达到共享的目的,还可以为其加入参数,例如obj,在最后调用的时候把相关的参数传进来,例如下边的window */
  var A = {};//定义一个A包
  var tmp;//临时变量
  A.i = 1;//定义这个包里边的i变量
  A.func = function(){alert('I am A');};
  obj.A = A;/* 把A包挂到obj底下 */
})(window);

当离开了这个函数域之后,tmp等局部变量被销毁(只要不要存在在闭包里边),程序员A定义的东西通通挂到了变量window.A底下,从而减少了很多污染,避免了不必要的冲突。

回到过去

再次回到刚刚提过的那个经历,如果我现在为editor.js整个包围在function里边,通过这种方式把$给隐藏在一个包里边,在它的其他控件中也采取这样的做法,当然还要做一小点改动:

JS代码:

/* editor.js */
(function(obj){
  /* 原先editor里边的内容 */
  /* 里边有定义了自己的$标志 */
  obj.editor = obj.editor || {};//如果没有editor对象,则生成一个空对象
  obj.editor.$ = $;//把$挂在全局的editor对象上
})(window);

JS代码:

/* 其他控件.js */
(function(obj){
  var $ = obj.$;//把$恢复
  /* 原先控件的内容 */
})(window.editor);

当然咯,如果editor.js有些功能需要暴露到全局的话,还需要将其进一步的挂在editor变量底下,这里只是一个示范。

本篇总结

很多框架都采用了这种做法减少全局污染,可能很多人一开始对这种做法有疑惑,这里只是个人理解拿出来分享一下,继续欢迎交流。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
js实现动态时钟
Mar 12 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 #Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 #Javascript
利用Blob进行文件上传的完整步骤
Aug 02 #Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 #Javascript
vue组件横向树实现代码
Aug 02 #Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 #Javascript
在微信小程序里使用watch和computed的方法
Aug 02 #Javascript
You might like
类的另类用法--数据的封装
2006/10/09 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php 注释规范
2012/03/29 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
spyder常用快捷键(分享)
2017/07/19 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
合作意向协议书范本
2014/03/31 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
整脏治乱工作简报
2015/07/21 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
在js中修改html body的样式
2021/11/11 Javascript
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js