javascript - 为 javascript 库创建命名空间

Question

我正在尝试创建一个foo.js包含函数的库foo.bar，我可以像这样调用它：

<script src="foo.js"></script>
<script>
    baz = foo.bar();
</script>

我正在尝试像这样编写这个库：

foo = function() {
    foo.bar = function() {
        // code goes here
    }
}();

这是我在其他地方看到的一种模式，虽然我不能说我完全理解发生了什么。当我尝试使用它时，我被告知foo在我尝试定义时未定义foo.bar。我错过了什么？

Answer 1

有这么多可能的模式，不可能确定你想要哪一个。

您可以这样做，例如：

var foo = (function(foo) {
    // here you can also declare "private" non exported variables,
    //   including functions that could be used by bar
    foo.bar = function() {
        // code goes here
    }
    return foo;
})(foo||{});

这将确保foo存在，并将bar向foo. 如果foo之前不存在，则创建它。如果它以前存在，它只是被增强了。

可以使用相同的逻辑来创建子模块，这样就更有意义了。

Answer 2

阅读本书以了解 js 模式：

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

它是免费的，而且很棒！

受dystroys答案的启发，我会稍微改变一下，然后这样写

var foo = (function () {

  // your private stuff here

  return {
    bar: function () {}
  };

})();

Answer 3

或者你可以这样做：

var foo = {
           bar : function() {
               // code goes here
          }
};

但这是一个对象文字，但仍然可以调用foo.bar()

Answer 4

我今天会这样写我的javascript模块：

(function(exports){

    exports.greet = function(){
        return 'hello beloved world'
    };

})(typeof exports === 'undefined'? this['uebermodule']={}: exports);

所以你可以在浏览器和 node.js 中使用你的 lib

uebermodule.greet() // is uniform in node as in browser

Axel Rauschmayer 博士就该主题撰写了文章。