JavaScript的命名空间架构

Namespace schema for JavaScript

本文关键字：命名空间 JavaScript      更新时间：2023-09-26

我来自Java世界。在Java中，有一些包，例如"com.mycompany.billing"和包中的类，例如"BillProcessor"。我所在的公司正在启动一个新项目，我需要决定一个好的命名空间模式。我正在考虑将Java中的实现方式投影到JavaScript中，例如，拥有一个命名空间"com.mycompany.billing"和一个类似于"BillProcessor.js"的文件中的类。此外，单元测试至关重要，因此我需要这样一个易于单元测试的结构。

有人能提出一个好的方法吗？

我想我想出了一个很好的解决方案，请给我建议。作为一个例子，我将制作一个账单页面。有4个文件：

${root}/billing.html-包含信用卡上名称的输入框

${root}/js.com/mycompany/common/common.js-初始化日志记录和错误处理

${root}/js.com/mycompany/common/Url.js-用于执行AJAX调用的类

${root}/js.com/mycompany/aprroject/biling.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>

大多数时候，人们使用Object Literal模式来实现JavaScript中的名称间距。

更多信息：http://msdn.microsoft.com/en-us/scriptjunkie/gg578608

您可以这样"嵌套"名称空间：

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

ScriptJunkie的另一篇文章涵盖了一些同名内容：http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

我在https://codereview.stackexchange.com/questions/8393/approach-to-organizing-javascript-for-an-html-page也许我会在那里得到答案

相关文章：