JavaScript 命名空间的首选技术

Question

如果我不开始使用某种命名空间技术，我的代码将会变得一团糟。我对大型 javascript 项目的编程相对较新，但在 C++/java/python 等系统编程方面拥有丰富的经验。

基本上，我试图确定哪种是创建 javascript 命名空间的首选方法，以及其优点/缺点每种方法。

例如，我可以使用以下三种方法之一：

var proj.lib.layout = {
  "centreElem":     
  function (elem, W, H){

  },

  "getAbsolutePosition":
  function (elem){

  }
};

OR

var proj.lib.layout = {};
(function(){
  var l = proj.lib.layout;

  l.centreElem = function (elem, winW, winH){
    ..
  }

  l.getAbsolutePosition = function (elem){
    ..
  }
})();

OR

var proj.lib.layout = new function(){
  function centreElem(elem, W, H){
    ..
  }

  function getAbsolutePosition(elem){
    ..
  }

  this.centreElem          = centreElem;
  this.getAbsolutePosition = getAbsolutePosition;
} ();

显然还有其他方法可以做到这一点，但这些是我看到和想到的第一个。谁能说有一种“最佳”技术，或者至少向我指出一些优点/缺点，以便我可以评估哪种技术最适合我？

Answer 1

请注意，您必须先创建所有中间对象，然后才能分配给子对象，如下所示：

window.one.two.three = {}; // fails
window.one = { two: { three: {} } };

考虑编写命名空间方法，以便可以统一命名空间代码。例如：

window.proj = {};
// n - {String} - A string representing a namespace to create on proj
// returns an object you can assign values to
window.proj.namespace = function(n) { /* ... */ };

(function(NS) {
    NS.myMethod = function() {};
    NS.myOtherMethod = function() {};
    NS.myProperty = "FOO";
})(proj.namespace('lib.layout'));

assert(proj.lib.layout.myProperty === "FOO");

Answer 2

我的首选方法是使用一个对象（其名称通常很短，包含 2-3 个字符，并且全部大写）作为我的命名空间，在其中包含所有其他对象。

下面显示的方法（与第二个示例最接近）还显示了如何隐藏任何私有函数：

// In this example the namespace is "QP"
if (!QP) {
    var QP = {};
};

// Define all objects inside an closure to allow "private" functions
(function() {

     QP.examplePublicFunction = function() {
         ...
     }

     function examplePrivateFunction() {
         ...
     }

})();

这是许多其他 JavaScript 库使用的方法，例如 json2.js

我从来没有真正觉得有必要将我的命名空间细分为子命名空间。

Answer 3

Google Closure Javascript 库 使用这种样式（与任何其他样式都不完全相同）你的例子）

goog.math.clamp = function(value, min, max) {
  return Math.min(Math.max(value, min), max);
};

我会坚持这种简单的风格。不要为自动执行的匿名函数包装器而烦恼。你的例子中的那个实际上并没有做任何有用的事情。

Answer 4

基本上，所有三个示例都使用相同的“命名空间”技术，即创建一个基本对象（您的命名空间），然后用您的函数对其进行扩充。

通常根命名空间是大写字母：

if (typeof (MYAPP) == "undefined" || !MYAPP) {
    var MYAPP= {}
};

然后您可以通过各种方式向该基础对象添加功能。在您的代码中，您显示了其中三个，但每个最终都得到相同的结果，您可以调用这两个函数：

proj.lib.layout.centreElem(elem, W, H);
proj.lib.layout. getAbsolutePosition(elem);