JavaScript的名称空间模式_Javascript_Jquery

JavaScript的名称空间模式

javascript jquery

JavaScript的名称空间模式,javascript,jquery,Javascript,Jquery,我来自爪哇世界。在Java中有包，例如“com.mycompany.billing”和包内的类，例如“BillProcessor”。我工作的公司正在启动一个新项目，我需要决定一个好的名称空间模式。我正在考虑将Java中的工作方式投影到JavaScript中，例如，有一个名称空间“com.mycompany.billing”和一个类，该类位于类似“BillProcessor.js”的文件中。此外，单元测试非常重要，所以我需要这样一个易于单元测试的结构有人能提出一个好办法吗我想我想出了一个很好

我来自爪哇世界。在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/aproject/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>


演员表
在信用卡上输入姓名：


付款

大多数情况下，人们使用对象文字模式在JavaScript中实现名称间距

更多信息：

您可以像这样“嵌套”名称空间：

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

另一篇ScriptJunkie文章介绍了一些名称空间方面的内容：

我将这个问题发布在上，也许我会在那里得到答案。

谢谢，我现在就去看看。我想建议你浏览@TomIngram，我喜欢我看到的东西。我对JavaScript采用面向对象的方法理解正确吗？嗯，我看到他没有使用对他不好的自动单元测试方法。@SBel面向对象在js中是很有趣的，尤其是相对于java来说，例如，afaik

var foo=function（）{}

foo

是一个对象，同时可以用作名称空间，我相信这就是嵌套和作用域的整个概念，所以可能与java中的内部类有点相似。你可能会觉得有些有趣。至于

模式

我认为可以对名称空间使用类似的约定，即

var mycomp={}；mycomp.billing={/*类的进一步嵌套*/}

@TomIngram我没有按照你说的一切去做，看看我在上面编辑的解决方案，我认为它很好。它使用类而不是类。