章节索引 :

避免全局污染

自己的项目,其实不太能在全局污染上踩坑。

大部分因为全局污染造成的问题,都出现在老项目下,这些老项目被太多人维护,同时又缺少模块化方案,如果开发人员的水平和意识都不是非常高,就会定义很多全局下的属性和方法。

这时候如果自己去维护老项目没注意,覆盖了一个全局项目,就可能出现一个惊天大 Bug

所以在全局环境下,非必要情况,不要直接声明变量和声明函数,他们会造成全局污染。

避免这个问题最常用的方法就是把自己的逻辑用一个函数包裹:

(function() {
  // 业务逻辑

  var a = 1;
  var b = 2;
  var c = 3;

  function fn() {
    console.log(a, b, c);
  }

  fn(); // 输出:1 2 3
})();

fn(); // 抛出异常:fn is not defined

函数拥有自己的作用域,这样就避免了全局污染的问题。

如果有时候需要通过全局做跳板,把一些内容临时的挂载全局下,可以起一些不太容易重名的名字:

window.__$some_global_var = 1;

通过 _$ 组合一些前后缀,可以大大降低覆盖他们或者被覆盖的可能性。

也可以增加一个命名空间,也就给全局下增加一个对象,所有自己要用的或者某个业务相关的全局数据放在这个对象下:

window.__some_logic_need = {
  __$some_global_var: 1,
  __$some_global_fn: function() {},
};
前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源