Question

我有以下代码

var PROMO = PROMO || {};

PROMO.Base = (function () {
  var _self = this;

  var Init = function () {
    WireEvents();
  };

  var WireEvents = function () {
   //wire up events
  };

} ());

在同一个文件中，我有代码来调用上面的函数

我正试图达到一个终点，我可以使用以下代码

 $(document).ready(function () {
    PROMO.Base.Init();
 });

这给出了错误

Cannot call method 'Init' of undefined

现在我知道有很多方法可以编写javascript，但在这种情况下，我希望能够以上面显示的方式调用我的函数，或者至少调用Init方法。

Answer 1

var PROMO = PROMO || {};

PROMO.Base = (function () {
  var _self = this;

  var Init = function () {
    WireEvents();
  };

  var WireEvents = function () {
   //wire up events
  };

  var reveal = {
        Init: Init        
  };

  return reveal;

} ());

您需要返回面向公众的功能。查看更新的代码。

Answer 2

使用IIFE和直接归因的

Working fiddle两种模式。

使用var使定义变为私有，并且您的函数不返回任何内容。使用此：

PROMO.Base = {
    Init: function() {
    },
    WireEvents: function() {
    };
};

您正在使用IIFE（立即执行的函数表达式）包装定义。因此，您的PROMO.Base对象将被赋予(function(){//blabla})();个返回值。但是你的函数没有return语句。默认情况下，它将返回undefined。

您的PROMO.Base将成为undefined的方式，您就明白了：

Cannot call method 'Init' of undefined

如果你真的想要那个IIFE：

var PROMO = PROMO || {};
// NEVER use _self = this inside static functions, it's very dangerous.
// Can also be very misleading, since the this object doesn't point to the same reference.
// It can be easily changed with Function.prototype.call and Function.prototype.apply
PROMO.Base = (function () {

    _PROMO = {
        Init : function () {
            document.body.innerHTML += "itworks";
        },
        WireEvents : function () {
   //wire up events
        }
    }
    return _PROMO;
} ());
PROMO.Base.Init();

<强>更新

更好更简单的模式是简单地将函数分配给PROMO.Base。 Dully注意你不应该大写静态函数，而只是构造函数。因此，如果某些内容不是要实例化的，请不要将其称为Init，它应该是init。这就是惯例。

var PROMO = {};
PROMO.Base = {};
PROMO.Base.init = function() {
    console.log("this works");
};
PROMO.Base.wireEvents = function() {
    console.log("this is a static function too");
};

Answer 3

您可以将其附加到window对象，例如......

window.PROMO = (function($, _){

// this will access PROMO.Base 
PROMO.Base = {
    // inner functions here
    Init:{}
};

})(jQuery, _);

然后像你一样加载它。

或者如果你依赖于jQuery

(function($){
    var PROMO = {
        // inner functions
        Init: function(){},
        WireEvents: function(){}
    };

    $.PROMO = PROMO;
})(jQuery);

在DOM准备好

jQuery(function ($) {
    var promo = $.PROMO || undefined;
    promo.Base.Init();
});

向对象添加功能

3 个答案: