JavaScript避免全局变量污染：命名空间与匿名函数方案

JavaScript避免全局变量污染：命名空间与匿名函数方案

本文介绍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;
})();

前言：全局变量冲突的痛点

前言

早期编写JS时，常在JS文件中定义函数并通过script标签引入，在DOM节点上绑定onclick等事件，这也是许多人常见的写法。

项目规模较小时，这种快速开发方式尚可接受；但当多人共同开发大型JavaScript应用时，不同的代码风格与全局变量会导致大量冲突，带来诸多困扰。

曾经的经历

使用jQuery的项目中，主要变量符号为$。许多开发人员也效仿此做法，将$定义为其他含义，这种做法令人担忧。

我曾接手一个使用jQuery的项目，上级要求集成一个已有的富文本编辑器，因此需要引入两个JS文件。

分别是jquery.js和editor.js。在编写页面逻辑时，我发现editor.js自定义了$符号。虽然尝试将其替换为其他标识符，但由于部分插件仍依赖它，混乱的结构导致花费大量时间解决冲突。

全局Window与变量挂载机制

全局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关键字，解释器会逐层向上查找，直至找到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程序设计有所帮助。