前言
记得long long ago,刚刚开始写JS的时候,我喜欢写一些函数在JS文件里边,然后通过script标签引进来,在DOM节点上绑定onclick等事件,看了很多人写的代码,也大多是这样。
后来会发现,当项目小的时候这么做为了快速开发是可以接受的,然而当很多人一起开发一个Javascript大应用的时候,你会发现不同的代码风格跟全局变量会导致很多冲突,这是一个很痛苦的事情。
曾经的经历
用过jQuery的人就知道其主要的变量符号就是$,没错!因此很多项目的开发人员也要学,就自己把$定义成别的含义了,我心里对其是无敌的鄙视跟厌恶。
我曾经拿过一个项目使用jQuery的,然后上头要我使用一个已有的富文本编辑器,这样就有两个JS文件了
jquery.js和editor.js,于是我要开始写该页面的逻辑了,我发现editor.js里边自定义了$符号,我原本想要把它直接替换成别的标志符,但是悲剧的是,它还有一些插件也会用到,混乱的结构导致我花了很多时间去解决这个冲突。
全局Window
我们都知道,在文件中直接定义的变量跟函数(不嵌套在任何域底下的)都是属于全局的,也就是都在当前页面的window变量底下。例如:
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写的代码如下:
(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里边,通过这种方式把$给隐藏在一个包里边,在它的其他控件中也采取这样的做法,当然还要做一小点改动:
/* editor.js */
(function(obj){
/* 原先editor里边的内容 */
/* 里边有定义了自己的$标志 */
obj.editor = obj.editor || {};//如果没有editor对象,则生成一个空对象
obj.editor.$ = $;//把$挂在全局的editor对象上
})(window);
/* 其他控件.js */
(function(obj){
var $ = obj.$;//把$恢复
/* 原先控件的内容 */
})(window.editor);
当然咯,如果editor.js有些功能需要暴露到全局的话,还需要将其进一步的挂在editor变量底下,这里只是一个示范。
本篇总结
很多框架都采用了这种做法减少全局污染,可能很多人一开始对这种做法有疑惑,这里只是个人理解拿出来分享一下,继续欢迎交流。
分享到:
相关推荐
主要介绍了JavaScript防止全局变量污染的方法,结合实例形式较为详细的总结分析了JavaScript防止全局变量污染的常用操作技巧与注意事项,需要的朋友可以参考下
JavaScript声明全局变量访问方法 JavaScript声明全局变量访问方法 JavaScript声明全局变量访问方法 JavaScript声明全局变量访问方法
看看有帮助,全局变量,与局部变量的差异!
我想在我的 javascript 代码中使用全局资源。通常,当代码在 ASP 代码中时,我使用 ("Resource", "MONTHS_SHORT1") %> 它有效。但是,当 javascript 代码不在 ASP 代码中时,例如在 calendar.js 文件夹中,它不起...
JavaScript进阶:JS的全局变量和全局函数.docx
javascript(jquery) 解决网站时区问题
JavaScript实现IFrame子窗口调用父窗口的全局变量
第3部分深入探索JavaScript,介绍了语法、值、运算符、布尔类型、数字、字符串、语句、异常捕获、函数、变量、对象与继承、数组、正则表达式、Date、Math、JSON、标准全局变量、编码和JavaScript、ECMAScript 5的新...
JavaScript全局变量的本质及页面共享问题 -页面
在JavaScript中,全局变量有两种声明方式 使用 var 显示声明的全局变量 不使用 var 声明的隐式全局变量 两者的区别在于是否能通过 delete 操作符删除 先看一段代码 var a = 'a'; // 显式声明的全局变量 b = 'b'; //...
JavaScript全局变量的本质及页面共享问题 -跨页面访问变量的问题
配置vue全局方法的两种方式实例 目录 1,前言 2,第一种方式 3,第二种方式 总结 1,前言 2,第一种方式 3,第二种方式 总结 1,前言 在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到...
vue全局实现数字千位分隔符格式 本文实例为大家分享了vue全局实现数字千位分隔符格式的具体代码,供大家参考,具体内容如下 这个是啥意思呢 ? 就是我们在页面上需要渲染数据的时候,比如 88888,我们需要按照...
javascript避免数字计算精度误差的方法详解.docx
1_02:HTML全局架构标签 http://download.csdn.net/source/2791139 1_03:注释与特殊字符 http://download.csdn.net/source/2792675 1_04:格式标签 http://download.csdn.net/source/2796769 1_05:文本标签 1_...
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
JavaScript应用实例-全局半透明背景.js
javascript正则表达式中参数g(全局)的作用.docx
主要介绍了JavaScript定义全局对象的方法,结合实例形式分析了javascript全局对象的简单定义流程与实现技巧,需要的朋友可以参考下