如何跨多个文件扩展JavaScript命名空间？

Question

我一直忽略JavaScript。几年前开始使用jQuery，以便能够应付。但是随着我越来越多地进行TDD，昨天我决定深入研究JavaScript（之后可能是coffeescript）。

在我的ASP.NET Web Forms应用程序中，我有许多页面，目前大多数页面没有大量的JavaScript。我正在改变这种情况。我正在使用Jasmine和Chutzpah创建我的测试。

我正在按预期移动测试，通过和失败。但是然后我想创建一个命名空间，这样我就不会践踏全局空间了。

在阅读了这篇文章之后： http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/ 我决定尝试使用Self-Executing Anonymous Function: Part 2（Public＆amp;Private）部分的模式。它似乎具有最大的灵活性，并且似乎非常好地封装了事物。

我有一个名为/Scripts的文件夹。该文件夹下是我正在使用的一些框架，如jQuery、jasmine、（twitter）bootstrap和modernizr。我还有一个名为/Site的子文件夹，根据页面将网站代码放在多个文件中。 （product.js、billing.js等）。

在/Scripts/Site下，我添加了一个子文件夹到/Tests（或Specs），其中包含文件（product_test.js、billing_tests.js等）。

没有命名空间一切正常。我创建了一个utility.js文件，其中包含padLeft帮助函数。然后我在另一个.js文件中使用了全局的padLeft。我的所有测试都有效，并且我很高兴。然后我决定找出命名空间并将我的Scripts/Site/utility.js更改为：

(function (myns, $, undefined) {
    //private property
    var isSomething = true;

    //public property
    myns.something = "something";

    //public method
    myns.padLeft = function (str, len, pad) {
        str = Array(len + 1 - str.length).join(pad) + str;

        return str;
    };


    //check to see if myns exists in global space
    //if not, assign it a new Object Literal
}(window.myns= window.myns|| {}, jQuery ));

然后在我的Scripts/Site/Tests/utility_test.js中，我有：

/// <reference path="../utility.js" />

describe("Namespace myns with public property something", function () {
    it("Should Equal 'something'", function () {
        expect(myns.something).toEqual('something');
    });
});

使用这个非常简单的测试，我期望myns.something返回字符串值'something'。

但实际上没有。它返回了undefined。

那么，我该如何在多个文件中使用JavaScript命名空间呢？

抱歉介绍这么长，但我认为这可能有助于解释我这样做的原因。我也将所有这些内容放在这里，因为我愿意听取关于这种设置完全错误或部分错误或其他任何想法的建议。

感谢您抽出时间阅读这个问题。

更新：已解决

感谢大家的帮助，其中评论者@T.J.Crowder提供了最有用的帮助。我不知道jsbin工具的存在，在被说服将上面的代码放入该工具并得到正确结果后，我知道我的环境肯定有问题。

接受答案中的链接也对我很有帮助。在看到语法和逻辑一致且正常工作后，我只需要确定我的设置有什么问题。我很尴尬地说，是我传递了jQuery，但在我试图让它工作的测试工具中，我实际上并没有使用jQuery。这意味着模块实际上没有被加载-因此myns从未设置过。

谢谢大家。希望这对将来的某个人有所帮助。如果您使用上面的内容，请确保包含jQuery对象。另一种选择是不传递jQuery并从参数列表中删除$。

- Chad Carter

---

这是一篇关于模块模式（你正在使用的）的非常好的文章，介绍了如何在文件之间实现它： http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth - Keith Rousseau

你展示的代码应该是有效的，前提是utility.js和utility_test.js都被包含，并且按照那个顺序。例如：http://jsbin.com/idofog - T.J. Crowder

谢谢您的长篇介绍，这有助于我们理解您想要什么 :-) - Philipp

@T.J.Crowder 谢谢。那个 bin 可以工作，但我不知道为什么在我的环境中会有所不同。我不知道 jsbin，所以也谢谢你！我将在那个沙盒中尝试一些东西。 - Chad Carter

Answer 1

尝试将命名空间声明放在函数调用之外：

myns = window.myns || {};
(function(myns, $, undefined) {
    ...
}(myns, jQuery));

你现有的语法似乎完全有效，但将该行拆分可能有助于弄清楚变量作用域出了什么问题。

- Alnitak

---

谢谢，我已经尝试了，但结果相同。看起来我还有其他的问题。正在深入挖掘中... - Chad Carter

Answer 2

Javascript没有命名空间，我猜你有变量作用域的问题，这与其他语言类似，你所谈论的是对象。你可以使用

window.myns.something

第一个函数已经将您的对象添加到窗口对象中，而窗口对象可以从任何地方访问。

- Philipp

---

在Javascript中，使用类似这样的嵌套属性是模拟命名空间的常见方式。 - Alnitak

我知道，但正如你所说，它是“模拟”命名空间。例如在.NET中，命名空间有很大的区别，但它类似于.NET中的对象（除了在运行时更改接口）。 - Philipp

@PhilippMehrwald 谢谢。我应该更清楚地说明“模拟命名空间”。我想要的模式是尝试避免使用window.myns.something。即使在我的测试文件中将其更改为那样也失败了。所以我一定还有其他问题。谢谢！ - Chad Carter

myns 最初是在哪里定义的？ - Philipp

@PhilippMehrwald 目前在Script\utilities.js文件的第一个代码块底部定义了它：window.myns= window.myns|| {}。 - Chad Carter