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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
webpack多页面开发实践
Dec 18 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 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
php&java(一)
2006/10/09 PHP
MySQL数据源表结构图示
2008/06/05 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
jquery中常用的SET和GET
2009/01/13 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python实现视频下载功能
2017/03/14 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
使用Python封装excel操作指南
2021/01/29 Python
大学生求职自我评价
2014/01/16 职场文书
党课心得体会范文
2014/09/09 职场文书
未中标通知书
2015/04/17 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python