使用jQuery确定“Revealing Module Pattern”模块的范围

时间:2012-04-17 14:57:40

标签: javascript jquery scope module-pattern revealing-module-pattern

说我有这个模块,我想让它自我初始化并附加到它的范围。像这样:

(function( scope ) {
    var Module = (function() {
      return {
          init: function(){
              console.log('Initialized');
          }
      };
    })();
    var module = scope.Module = Module;
    module.init();
})( self );

现在问题是, self 始终是 window 。我不希望这样。我希望它是由jQuery的$.getScript()调用和加载的范围,如下所示:

var Master = (function($) {
    return {
        init: function() { 
            var self = this;
            $.getScript("/js/libs/module.js");
        }
    }
})(jQuery)

有没有办法解决这个问题?

2 个答案:

答案 0 :(得分:3)

我认为你不能为使用$ .getScript调用的自执行脚本注入范围。相反,您必须使用某种导出变量来存储脚本,直到可以注入范围。

(function( exports ) {
   exports.Module = function() {
     return {
        init: function(scope){
           console.log('Initialized', scope);
        }
     };
   };
   var module = exports.Module;
})( exports || window.exports = {} );

然后:

var self = this; // or whatever you want the scope to be
$.getScript("/js/libs/module.js", function(){
    exports.Module().init(self);
});

老实说,如果你像这样使用jQuery作为模块模式,可以考虑使用更全面的库加载器,例如require.jsFrame.js

答案 1 :(得分:0)

JavaScript中的范围与函数紧密相关,而非对象。 JS {}中的对象不会创建自己的范围。我不熟悉jQuery中的“Revealing Module Pattern”,但要获得一个独特的范围,你可以这样做:

(function( scope ) {
    var Module = (function() {
      return new function() {
          this.init = function(){
              console.log('Initialized');
          }
      };
    })();

    var module = scope.Module = Module;
    module.init();

})();

或者,或许更简洁:

(function( scope ) {
    var Module = new function() {
        this.init = function(){
          console.log('Initialized');
        };
    };

    var module = scope.Module = Module;
    module.init();

})();

在这种情况下,范围是模块,而不是窗口。