Javascript模塊化命名空間模式

我試圖使用模塊化命名空間模式，該模式允許我擴展各種命名空間中可用的功能並在多個文件中定義它們。這是我正在使用的模式;Javascript模塊化命名空間模式

var Namespace = Namespace || {}; 

Namespace.SubSpace = (function() { 
    var subspace = {}; 

    subspace.Func = function() { 
     return "My Function"; 
    }; 

    return subspace; 
})();

如何在命名空間函數定義之前使其可用？換句話說，如何在不依賴已被解析的函數聲明的情況下調用Namespace.SubSpace.Func()？

來源

2014-01-22 Red Taz

你不能。你爲什麼需要這個？ – Bergi

您是否知道在您的示例中，您將立即執行該函數並且Namespace.SubSpace.Func實際上是未定義的？ –

@Bergi我想將附帶的腳本作爲WebForms組件庫的一部分進行捆綁，因此不能保證在用戶腳本之前將JavaScript包含在內。這個問題受到微軟'Sys.WebForms'方法的啓發。 –

我可以通過使用類似於JQuery的ready()函數的方法來解決我的問題。但是，它確實依賴於在其他任何地方之前定義根名稱空間。根名稱空間還包含允許回調註冊的功能。

var Namespace = (function() { 

    var namespace = {}; 
    namespace.ReadyCallbacks = []; 

    namespace.Ready = function (callback, queueJump) { 
     if (queueJump) 
      namespace.ReadyCallbacks.unshift(callback); 
     else 
      namespace.ReadyCallbacks.push(callback); 
    }; 

    namespace.Begin = function() { 
     for (x = 0; x < namespace.ReadyCallbacks.length; x++) { 
      namespace.ReadyCallbacks[x](); 
     } 
    }; 

    return namespace; 
})();

重要的是，這區別於應在別人之前運行的回調。這允許框架模塊在用戶腳本執行之前定義子命名空間和功能。（即使用戶腳本首先被加載）。

用戶腳本

Namespace.Ready(function() { 
    console.log(Namespace.SubSpace.Func()); // prints "Module 1" 
});

框架模塊

Namespace.Ready(function() { 
    Namespace.SubSpace = (function() { 
     var subspace = {}; 

     subspace.Func = function() { 
      return "Module 1"; 
     }; 

     return subspace; 
    })(); 
}, true);

最後，調用Namespace.Begin()執行正確的順序一切。另外，由於我使用JQuery，我可以在$(document).ready()中包裝它。

我不是非常熟練的JavaScript，所以我不知道這個方法是多麼'正確'，我歡迎評論&建議。

來源

2014-01-23 11:10:04

Javascript模塊化命名空間模式

回答

相關問題