JavaScript命名空间模式实战：7种常见模式解析与代码示例

JavaScript命名空间概述

本文通过具体实例详细解析JavaScript中的命名空间模式，旨在为开发者提供实用的参考与借鉴。

前言

命名空间本质上是将代码在特定标识符下进行逻辑分组。引入这一概念的原因在于词汇资源有限，且不同开发者编写的代码难免出现变量重名。在JavaScript环境中，命名空间能有效防止当前代码与全局作用域中的其他对象或变量发生冲突。此外，它还有助于代码的组织架构，提升代码的可维护性与可读性。本文旨在探讨JavaScript中几种主流的命名空间模式，为开发者提供设计思路。

全局变量带来的挑战

JavaScript的执行环境具有独特性，其中全局变量和函数的使用尤为典型。JavaScript的执行环境由大量预先存在的全局变量构成，这些变量在函数执行环境之前就已经创建。所有全局变量均挂载在“全局对象”之下，在浏览器环境中，window对象即代表全局对象。因此，在全局作用域中声明的任何变量和函数都会成为window对象的属性。当名称发生冲突时，便会引发不可控的问题。全局变量主要带来以下负面影响：

命名冲突

代码脆弱性增加

测试难度加大

在编程开发中，合理使用命名空间可以有效避免因变量或对象名称相同而引发的冲突。同时，命名空间有助于代码组织，显著提升代码的可维护性和可读性。尽管JavaScript原生未提供命名空间支持，但我们可以利用对象和闭包等机制实现类似效果。以下是几种常见的命名空间模式：

单一全局变量模式

1. 单一全局变量模式

在JavaScript中，一种流行的命名空间策略是选择一个全局变量作为主要引用对象。由于所有可能的全局变量都成为该唯一全局变量的属性，因此无需创建多个全局变量，从而避免了与其他声明的冲突。

该单一全局变量模式已被众多JavaScript类库广泛采用，例如：

YUI定义了唯一的YUI全局对象
jQuery定义了jQuery和$全局变量，其他类库使用时通常使用jQuery
Dojo定义了一个Dojo全局变量
Closure类库定义了一个goog全局对象
Underscore类库定义了一个_ 全局对象

具体示例如下：


var myApplication = (function() {
  function() {
    // ***
  },
  return {
    // **
  }
})();

尽管单一全局变量模式适用于某些场景，但其最大挑战在于确保该单一全局变量在页面中唯一使用，避免发生命名冲突。

命名空间前缀模式

2. 命名空间前缀模式

命名空间前缀模式的思路清晰，即选择一个独特的命名空间，并在其后声明变量、方法和对象。具体示例如下：


var = myApplication_propertyA = {};
var = myApplication_propertyA = {};
function myApplication_myMethod() {
  // ***
}

从某种程度上看，该模式确实降低了命名冲突的发生概率，但并未减少全局变量的总数。随着应用程序规模的扩大，会产生大量全局变量。在全局命名空间内，这种模式强烈依赖于其他开发者不使用相同的前缀，且有时难以判断是否已有其他人使用了特定的前缀。因此，使用此模式时需格外谨慎。

对象字面量表示法

3. 对象字面量表示法

对象字面量模式可视为包含一组键值对的对象，每对键和值由冒号分隔，键本身也可以是新的命名空间。具体示例如下：


var myApplication = {
  // 可以很容易的为对象字面量定义功能
  getInfo:function() {
    // ***
  },
  // 可以进一步支撑对象命名空间
  models:{},
  views:{
    pages:{}
  },
  collections:{}
};

与为对象添加属性类似，我们也可以直接将属性添加到命名空间。对象字面量方法不会污染全局命名空间，并在逻辑上协助组织代码和参数。此外，这种方式具有极高的可读性和可维护性。当然，在使用时应进行同名变量存在性测试，以避免冲突。以下是一些常用的检测方法：


var myApplication = myApplication || {};
if(!myApplication) {
  myApplication = {};
}
window.myApplication || (window.myApplication || {});
// 针对jQuery
var myApplication = $.fn.myApplication = function() {};
var myApplication = myApplication === undefined ? {} :myApplication;

对象字面量为我们要提供了优雅的键/值语法，使我们能够便捷地组织代码，封装不同的逻辑或功能，且具备极强的可读性、可维护性和可扩展性。

嵌套命名空间模式

4. 嵌套命名空间模式

嵌套命名空间模式可视为对象字面量模式的升级版，这也是一种有效的避免冲突模式，因为即使存在一个命名空间，它也不太可能拥有相同的嵌套子对象。具体示例如下：


var myApplication = myApplication || {};
// 定义嵌套子对象
myApplication.routers = myApplication.routers || {};
myApplication.routers.test = myApplication.routers.test || {};

当然，我们也可以声明新的嵌套命名空间或属性作为索引属性，例如：


myApplication['routers'] = myApplication['routers'] || {};

使用嵌套命名空间模式，可以使代码易读且有组织性，且相对安全，不易产生冲突。其弱点在于，如果命名空间嵌套层级过多，会增加浏览器的查询工作量。我们可以将频繁访问的子对象进行局部缓存，以此减少查询时间。

立即调用的函数表达式（IIFE）

5. 立即调用的函数表达式（IIFE）

立即调用函数（IIFE）实际上就是匿名函数，定义后立即被调用。在JavaScript中，由于变量和函数都是在这样一个只能在内部访问的上下文中被显式地定义，函数调用提供了一种实现私有变量和方法的便捷方式。IIFE是用于封装应用程序逻辑的常用方法，以保护其免受全局名称空间的影响，其在命名空间方面也可以发挥特殊作用。具体示例如下：


// 命名空间和undefined作为参数传递，确保：
// 1.命名空间可以在局部修改，不重写函数外部上下文
// 2.undefined 的参数值是确保undefined，避免ES5规范里定义的undefined
(function (namespace, undefined) {
// 私有属性
var foo = "foo";
  bar = "bar";
// 公有方法和属性
namespace.foobar = "foobar";
namespace.sayHello = function () {
  say("Hello World!");
};
// 私有方法
function say(str) {
  console.log("You said:" + str);
};
})(window.namespace = window.namespace || {});

可扩展性是任何可伸缩命名空间模式的关键，使用IIFE可以轻松实现这一目的，我们可以再次使用IIFE给命名空间添加更多的功能。

命名空间注入模式

6. 命名空间注入模式

命名空间注入是IIFE的另一个变体，从函数包装器内部为一个特定的命名空间“注入”方法和属性，使用this作为命名空间代理。这种模式的优点是可以将功能行为应用到多个对象或命名空间。具体示例如下：


var myApplication = myApplication || {};
myApplication.utils = {};
(function () {
  var value = 5;
  this.getValue = function () {
    return value;
  }
  // 定义新的子命名空间
  this.tools = {};
}).apply(myApplication.utils);
(function () {
  this.diagnose = function () {
    return "diagnose";
  }
}).apply(myApplication.utils.tools);
// 同样的方式在普通的IIFE上扩展功能，仅仅将上下文作为参数传递并修改，而不是仅仅使用this

还有一种使用API来实现上下文和参数自然分离的方法，该模式感觉更像是一个模块的创建者，但作为模块，它还提供了一个封装解决方案。具体示例如下：


var ns = ns || {},
  ns1 = ns1 || {};
// 模块、命名空间创建者
var creator = function (val) {
  var val = val || 0;
  this.next = function () {
    return val ++ ;
  };
  this.reset = function () {
    val = 0;
  }
}
creator.call(ns);
// ns.next, ns.reset 此时已经存在
creator.call(ns1, 5000);
// ns1包含相同的方法，但值被重写为5000了

命名空间注入用于为多个模块或命名空间指定一个类似的功能基本集，但最好是在声明私有变量或者方法时再使用它，其他时候使用嵌套命名空间已经足以满足需要了。

自动嵌套的命名空间

7. 自动嵌套的命名空间

嵌套命名空间模式可以为代码单元提供有组织的结构层级，但每次创建一个层级时，我们也得确保其有相应的父层级。当层级数量很大时，会给我们带来很大的麻烦，我们不能快速便捷的创建想创建的层级。那么如何解决这个问题呢？Stoyan Stefanov提出，创建一个方法，其接收字符串参数作为一个嵌套，解析它，并自动用所需的对象填充基本名称空间。下面是这种模式的一种实现：


function extend(ns, nsStr) {
  var parts = nsStr.split("."),
    parent = ns,
    pl;
  pl = parts.length;
  for (var i = 0; i < pl; i++) {
    // 属性如果不存在，则创建它
    if (typeof parent[parts[i]] === "undefined") {
      parent[prats[i]] = {};
    }
    parent = parent[parts[i]];
  }
  return parent;
}
// 用法
var myApplication = myApplication || {};
var mod = extend(myApplication, "module.module2");

以前我们必须为其命名空间将各种嵌套显式声明为对象，现在用上述更简洁、优雅的方式就实现了。

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

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

JavaScript命名空间模式详解：从单一变量到自动嵌套