Javascript 您将如何组织一个大型复杂的web应用程序（请参见基本示例）？

为了让事情变得有趣并结束我的最后一个公开问题，以一种良好的组织方式和一个体面的体系结构实现以下功能的解决方案得到了很好的奖励。完整的代码在JSFIDLE上，您可以随意提问：）

您通常如何组织客户端极其丰富的复杂web应用程序。我创建了一个人为的例子来说明，如果大型应用程序的管理不好，很容易陷入混乱。如有需要，请随意修改/扩展此示例-

该示例基本上反映了SO上的部分评论发布，并遵循以下规则：

必须至少有15个字符， 修剪多个空间后 一对一

如果单击了添加注释，但 移除后的大小小于15 多个空格，然后显示一个弹出窗口 带着错误

指示剩余字符数和 用颜色编码进行总结。灰色表示一种颜色 小评论，布朗表示 中等评论，橙色大 注释，红色表示注释溢出

只能提交一条评论 每15秒。如果评论是 提交太早，显示弹出窗口 带有适当的错误消息

我在这个例子中注意到了几个问题

• 理想情况下，这应该是一个小部件或某种打包的功能
• 例如每15秒一条评论，以及至少15个字符的评论属于某些应用程序范围的策略，而不是嵌入每个小部件中
• 硬编码值太多
• 没有代码组织。模型、视图、控制器都捆绑在一起。并不是说MVC是组织富客户端web应用程序的唯一方法，但本例中没有

你将如何着手清理这个？一路上应用一点MVC/MVP

下面是一些相关函数，但如果您在JSFIDLE上看到了完整的代码，则会更有意义：

/**
 * Handle comment change.
 * Update character count. 
 * Indicate progress
 */
function handleCommentUpdate(comment) {
    var status = $('.comment-status');

    status.text(getStatusText(comment));
    status.removeClass('mild spicy hot sizzling');
    status.addClass(getStatusClass(comment));
}

/**
 * Is the comment valid for submission
 * But first, check if it's all good.
 */
function commentSubmittable(comment) {
    var notTooSoon = !isTooSoon();
    var notEmpty = !isEmpty(comment);
    var hasEnoughCharacters = !isTooShort(comment);

    return notTooSoon && notEmpty && hasEnoughCharacters;
}

/**
 * Submit comment.
 * But first, check if it's all good!
 */
$('.add-comment').click(function() {
    var comment = $('.comment-box').val();

    // submit comment, fake ajax call
    if(commentSubmittable(comment)) {
        .. 
    }

    // show a popup if comment is mostly spaces
    if(isTooShort(comment)) {
        if(comment.length < 15) {
            // blink status message
        }
        else {
           popup("Comment must be at least 15 characters in length.");
        }
    }
    // show a popup is comment submitted too soon
    else if(isTooSoon()) {
        popup("Only 1 comment allowed per 15 seconds.");
    }

});

/**
*处理注释更改。
*更新字符计数。
*表明进展
*/
函数handleCommentUpdate（注释）{
变量状态=$（'.comment status'）；
status.text（getStatusText（comment））；
状态：removeClass（“轻度辛辣嘶嘶声”）；
status.addClass（getStatusClass（comment））；
}
/**
*评论对提交有效吗
*但首先，检查一下是否都好。
*/
函数commentSubmittable（注释）{
var notTooSoon=！isTooSoon（）；
var notEmpty=！isEmpty（注释）；
var hasEnoughCharacters=！isTooShort（注释）；
return notTooSoon&¬Empty&&hasEnoughCharacters；
}
/**
*提交评论。
*但首先，检查一下是否都好！
*/
$（'.add comment'）。单击（函数（）{
var comment=$（'.comment-box'）.val（）；
//提交评论，伪造ajax调用
if（注释可提交（注释））{
.. 
}
//如果注释主要是空格，则显示弹出窗口
如果（iStoshort（注释））{
如果（注释长度<15）{
//闪烁状态信息
}
否则{
弹出（“注释长度必须至少为15个字符。”）；
}
}
//显示弹出窗口评论提交过快
else if（istooson（））{
弹出（“每15秒仅允许1条评论”）；
}
});

编辑1:

@matpol感谢您对包装器对象和插件的建议。这将是对现有混乱局面的一大改善。然而，这个插件不是独立的，正如我提到的，它将是一个更大的复杂应用程序的一部分。客户端/服务器端的应用程序范围策略将规定注释的最小/最大长度、用户注释的频率等。当然，插件可以作为参数提供这些信息

---

此外，对于富客户端应用程序，数据必须与其html表示分离，因为应用程序具有数据感知能力，可以在本地存储内容，并在服务器上定期更新，或者在应用程序本身发生有趣的事件时更新，所以可以保存许多服务器往返（如车窗关闭时）。这就是我不喜欢插件方法的原因。它的工作原理与提供打包表示一样，但它仍然以DOM为中心，当应用程序中有20个这样的插件时，这将是一个问题，这无论如何都不是一个荒谬的数字。

我会将其转换为jQuery插件或静态object

静态对象只是作为一种类型或包装器，我也会将它分解成更小的函数，例如

init()
checkLength()
checkTime()

所以你可能会得到这样的结果：

Widget = {

init:function(){//setup events etc},
checkLength:function(){},
checkTime:function(){},
doMessage:function(){}


}

---

Matpol为提供的特定信息提供了一个字面上的解决方案。您的编辑意味着您正在寻找一个更假设性问题的答案。换句话说，您正在寻找“方法”

以这种方式回答问题；您给出的单个示例有点像是在转移注意力。它只是整个应用程序中的一个项目，阻止我们“从树上看到森林”.那么什么是森林呢？这样问的问题并没有定义森林。但我想所有程序员都会同意，当我说在一个没有定义的项目上工作是一场噩梦时。所以，我将重新表述你的问题并回答，“定义项目的过程是什么？”

事实上，我提出了一系列问题：

• 此应用程序的核心目的是什么
• 你想什么时候发布？如果我们必须在1/4的时间内发布，你会保留哪些功能
• 您绝对确定以后需要哪些功能

很多时候，为了弄清这些问题，我需要问其他商业问题：

• 你的听众是谁
• 他们为什么关心这个网站？是什么让他们回来
• 你将如何创造收入
• 你的行动要求是什么

  var MyNamespace.MyClass = function() {
    var elementINeed = $('#IdOfElementINeed');
  }
  

  var foo = new MyNamspace.MyClass($('#IdOfElementINeed'));
  
  var MyNamespace.MyClass = function(incomingDependency) {
    var elementINeed = incomingDependency;
  }
  

  $('#someElement').click(function(){
    // insert complex client-side functionality here, such as validating input
    // eg var isValid = $(this).val() < minimumCommentLength;
    // update page based on result of javascript code
    // eg $('#commentTooLong').show();
  })
  

  $('#addCommentButton').click(function(){
    $.ajax({ 
      url: "/comment/add", 
      context: document.body, success: 
      function(responseHTML){
          $('body').html(reponseHTML);
        }});
  })