JavaScript的命名空間架構

我來自Java的世界。在Java中，存在包，例如，「com.mycompany.billing」和包內的類，例如「BillProcessor」。我工作的公司正在開始一個新項目，我需要決定一個好的命名空間模式。我正在考慮如何在Java中完成JavaScript，例如，命名空間爲「com.mycompany.billing」，類爲「BillProcessor.js」之類的文件。另外，單元測試非常重要，所以我需要這樣一個易於進行單元測試的結構。JavaScript的命名空間架構

有人可以提出一個好方法嗎？

我想我想出了一個很好的解決方案，請指教。作爲一個例子，我將製作一個結算頁面。有4個文件：

$ {ROOT} /billing.html - 包含信用卡

$ {}根上的名字輸入框/js/com/mycompany/common/common.js - 初始化記錄和錯誤處理

$ {根} /js/com/mycompany/common/Url.js - 類，它是用於執行AJAX調用

$ {根}/JS/COM/myCompany的/在進行一個項目/billing.js - 在結算頁面上初始化東西

因此，例如，common.js包含：

var com_mycompany_common_common = function() { 

    function log(message) { 
     console.log((new Date()) + ': ' + message); 
    } 

    function init() { 
     window.onerror = function(message) { 
      log('Unhandled error: ' + message); 
     } 
    } 

    return { 
     log: log, 
     init: init 
    } 
}(); 

$(document).ready(function() { 
     try { 
      com_mycompany_common_common.init(); 
     } catch (e) { 
      console.log('Error during initialization: ' + e); 
     } 
});

Url.js：

function com_mycompany_common_Url(url) {  
    this.url = url; 
} 

com_mycompany_common_Url.prototype.addParameter(name, value) { 
    this.url += '?' + name + '=' + value; 
} 

com_mycompany_common_Url.prototype.ajax() { 
    com_mycompany_common_common.log('Send ajax to: ' + this.url); 
}

billing.js

var com_mycompany_aproject_billing = function() { 

    function init() { 
     $('#submitButton').click(function() { 
      Url url = new com_mycompany_common_Url('http://bla.com/process/billing'); 
      var creditCardName = $('#ccName').val(); 
      url.addParameter('name', creditCardName); 
      url.ajax(); 
     } 
    } 

    return {init: init}; 
}(); 

$(document).ready(function() { 
     try { 
      com_mycompany_aproject_billing.init(); 
     } catch (e) { 
      console.log('Error during initialization: ' + e); 
     } 
});

billing.html

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Billing</title> 
    </head> 
    <body> 
     Enter name on credit card: <input type="text" id="ccName" /><br><br> 
     <button id="submitButton">Submit Payment</button> 

     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
     <script type="text/javascript" src="js/com/mycompany/common/common.js"></script> 
     <script type="text/javascript" src="js/com/mycompany/common/Url.js"></script> 
     <script type="text/javascript" src="js/com/mycompany/aproject/billing.js"></script> 
    </body> 
</html>

來源

2012-01-27 SBel

http://eloquentjavascript.net/chapter9.html似乎深入瞭解這個話題。 – millimoose 2012-01-27 19:21:37

我想建議你瀏覽[FullCalendar的源代碼]（https://github.com/arshaw/fullcalendar） – 2012-01-27 19:30:06

@TomIngram我喜歡我所看到的。我是否正確理解，採用面向對象的JavaScript方法？嗯，我發現他沒有使用自動化的單元測試方法，這對我來說不是很好。 – SBel 2012-01-27 19:40:43

大多數人使用對象文本樣式以獲得時間JavaScript中的名稱間隔。

你可以在「鳥巢」的命名空間，像這樣：

var MyCompany = MyCompany || {}; 
MyCompany.Billing = MyCompany.Billing || {}; 
// etc...

另一個覆蓋一些命名空間的東西ScriptJunkie文章：http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

來源

2012-01-27 19:20:34 rusty

謝謝，我現在檢查一下。 – SBel 2012-01-27 19:21:18

我張貼了這個問題https://codereview.stackexchange.com/questions/8393/approach-to-organizing-javascript-for-an-html-page可能我會得到答案。

來源

2012-01-28 13:02:27 SBel

JavaScript的命名空間架構

回答

相關問題