像 jQuery 这样的大型 javascript 命名空间答案

【问题标题】：namespacing large javascript like jQuery像 jQuery 这样的大型 javascript 命名空间
【发布时间】：2012-04-24 07:32:14
【问题描述】：

我有一个非常大的 javascript 文件：超过 9,000 行。代码如下所示：

var GlobalVar1 = "";
var GlobalVar2 = null;

function A() {...}

function B(SomeParameter) {...}

我正在使用 google 编译器，全局变量和函数被重命名为 a,b,c... 并且有一个很好的变化，以后可能会与一些外部代码发生冲突。

我想要做的是像 jquery 库一样组织我的代码，其中所有内容都可以通过 $ 访问。有没有办法给我的代码命名，例如，所有内容都在 # 字符后面。

我想用这个来调用我的代码：

#.GlobalVar
#.functionA(SomeParameter)

我该怎么做？

【问题讨论】：

# 不是 javascript 标识符名称中的有效字符。对于“命名空间”，请查看模块模式。全局变量被转换为局部变量并通过闭包访问。应该在“命名空间”之外可用的其他变量和函数被保存为单个全局对象的属性。
您可以使用 $ 和 _ 这两个有效字符
重复stackoverflow.com/questions/6549629/…（链接的问题更普遍适用）

标签： javascript jquery

【解决方案1】：

旁注：# 字符不是有效的变量名（请参阅this question）。常见的“速记”是下划线_ 和美元$。我记得读到美元的使用是用于机器生成的代码，但这在很大程度上被忽视了，正如你在 jQuery 中看到的那样。

最熟悉的技术是这样的：

(function($) {
  $.a = function() { ... }
  $.b = 1000;
})(myNamespace);

myNamespace.a( ... );

无论哪种方式，我认为您必须在代码中对 some 变量进行赋值。

您也可以指定类之类的东西：

function MyClass() {
  var f = 0;

  function a() { return f; }
  function b(value) { f = value; }
  function c() { f *= f; }

  this.get = a;
  this.set = b;
  this.square = c;
}

var myInstance = new MyClass();

【讨论】：

$ 字符用于 ECMA-262 ed 3 中的机器生成代码。我认为 Prototype.js 是第一个普及其在标识符中的使用（可能是模仿原始语言中的其他语言中的变量名）作者比较熟悉）。 jQuery 从那里借来的。

【解决方案2】：

您必须将所有库包装在一个闭包中以保护您的局部变量。您希望全局访问的成员应分配给全局上下文对象（在浏览器中为 window）。

(function(){
  var GlobalVar1 = "";
  var GlobalVar2 = null;

  function A() {...}

  function B(SomeParameter) {...}

  //  some function accessible globally with `window.C()` or just `C()`:
  window.C = function() {}
})();

【讨论】：

你也可以做 function Test( ) { } var foo = new Test( );

【解决方案3】：

var $$ = {
    A: function() {
        alert('namespace rules!');
    },
    B: function() {
        alert('foo');
    }
}
$$.A();
$$.B();

LIVE DEMO

等等......

请注意，我从 # 更改为 $$ 是因为 # 使用了非法的变量名。

【讨论】：

@Thilo。这是一个例子......但我编辑，只是为了你...... :-)
好的，然后在我的代码中，我不写 functionA(SomeParameter)，而是通过写 $.A 来调用函数，如果我想访问我当前的全局变量，我写 $.MyGlobal = 3 ;而不是 MyGlobal = 3; ?如果 # 不好并且 $ 已经被占用，那么有什么好的选择？ @ 或 % 或 & 更好吗？
@frenchie。 $$ 呢？顺便说一句，您可以调用命名空间frenchie，这比$ 酷得多... :)
@Thio——你的意思是什么？ jQuery 并不关心 Prototype.js 在采用 $ 字符时已经普及了它。虽然我同意这是一个糟糕的选择，因为它没有提供任何有关其含义的信息。

【解决方案4】：

var # = {
    GlobalVar1: "",
    GlobalVar2: null,

    A: function() {

    },

    B: function(SomeParameter) {

    }
}

【讨论】：

【解决方案5】：

另一种方法 - 如果您已经在使用 Closure Compiler - 将使用它的功能来处理命名空间。

例子：

mylib.js：

goog.provide('mynamespace.whatever');

var globalVar1='foo';

mynamespace.whatever.functionA=function(txt){
    alert('A: '+txt+' '+globalVar1);
};

mynamespace.whatever.functionB=function(){
    alert('B: '+txt+' '+globalVar1);
};

main.js：

goog.require('mynamespace.whatever');

mynamespace.whatever.functionA('hello world');

如果你想在编译代码之外使用未混淆的函数/变量，你可以使用：

goog.exportProperty(object, publicName, symbol)

和

goog.exportSymbol(publicPath, object, opt_objectToExportTo)

看看：http://closure-library.googlecode.com/svn/docs/closure_goog_base.js.html

【讨论】：