用jQuery確定'Revealing Module Pattern'模塊的範圍

Question

假設我有這個模塊，並且我希望它自行初始化並附加到它的範圍。像這樣：現在

(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) 

有沒有辦法破解這個？

Answer 1

我不認爲你可以將範圍注入到用$ .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像這樣的模塊模式，可以考慮使用一個更全面的庫加載器如或Frame.js。

Answer 2

JavaScript中的作用域與函數而非對象密切相關。 JS {}中的對象不會創建它自己的範圍。我不熟悉的jQuery「揭示模塊模式」，但要獲得一個獨特的範圍，你會做這樣的事情：

(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(); 

})(); 

在這情況下，範圍是模塊，而不是窗口。