javascript - 您将如何组织大型复杂的 Web 应用程序(参见基本示例)？

Question

只是为了让事情变得有趣并结束我最后一个 Unresolved 问题，以良好组织的方式和体面的架构实现以下功能的解决方案获得了丰厚的返回。完整的代码在 jsfiddle 上，如有任何问题请随时提问 :)

您通常如何组织客户端极其丰富的复杂 Web 应用程序。我创建了一个人为的示例来说明如果大型应用程序的管理不善，很容易陷入困惑。您可以随意修改/扩展此示例 - http://jsfiddle.net/NHyLC/1/

该示例基本上反射(reflect)了 SO 上发表评论的部分内容，并遵循以下规则:

1. 必须至少有 15 个字符， trim 多个空格后出一。
2. 如果点击了Add Comment，但是删除后尺寸小于 15多个空格，然后显示一个弹出窗口有错误。
3. 指出剩余的字符数和用颜色编码总结。灰色表示小评论，棕色表示中评，橙一大评论，红色评论溢出。
4. 只能提交一条评论每 15 秒。如果评论是提交太早，显示弹出窗口带有适当的错误消息。

我注意到这个例子中的几个问题。

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

你会如何清理它？沿途应用一点 MVC/MVP？

下面是一些相关的函数，但是如果你在 jsfiddle 上看到完整的代码，它会更有意义:

/**
 * 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.");
    }

});

编辑 1:

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

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

Answer 1

我这样做的方式是 3 倍。

1. 将 javascript 封装在 namespace 内定义明确的小类中
2. Javascript 类应该将它们需要的 HTML 作为依赖项“注入(inject)”到它们中，从而允许 out-of-browser unit testing
3. 将尽可能多的客户端功能移至服务器并使用称为 AHAH 的概念

Javascript 名称间距

这很容易实现，并且已在其他帖子中介绍过，例如 Is there a "concise" way to do namespacing in JavaScript?

小型封装类

Javascript 代码，就像服务器端代码一样，应该用小的内聚类和方法很好地封装。每个类都存在于一个单独的文件中，根据它所在的命名空间命名，例如:MyCompany.SomePackage.MyClass.js。可以通过 combining and minifying 保存对每个文件的过多 HTTP 请求这些类文件在构建时。

Javascript 中的依赖倒置

如此有效，而不是选择您需要在类里面使用的元素，就像这样:

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

你可以这样注入(inject)它:

var foo = new MyNamspace.MyClass($('#IdOfElementINeed'));

var MyNamespace.MyClass = function(incomingDependency) {
  var elementINeed = incomingDependency;
}

此技术非常适合通过 MVC style 测试 javscript 和关注点分离代码分层。

AHAH 和客户端简化

AHAH是一种相当古老的技术，在网络开发中已经存在了很长一段时间，尽管它因其纯粹的简单性而在网络爱好者中重新流行起来。然而，必须在架构技术层面上接受这一理念，并且必须将其用作所有客户端 javascript 的替代品，例如:验证、显示/隐藏动态内容、计算等

您可能曾经在其中附加了具有客户端复杂性的 onClick 事件:

$('#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();
})

现在您只需触发一个返回服务器的 ajax 请求以获取新的 HTML 并简单地替换所有或部分您感兴趣的元素:

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

显然这是一个微不足道的例子，但如果有效使用，页面上的任何 javascript 事件都会触发相同的 ajax 请求和 HTML 替换，从而大大减少所需的客户端代码量。将其移动到可以对其进行有效测试的服务器。

AHAH 反对者会争辩说，这不是运行网站的高效方式，但是我已经在具有 56k 调制解调器访问权限的网站以及大规模扩展的公共(public)网站上使用并看到了这种技术。结果当然更慢，但您仍然可以产生低于 100 毫秒的往返行程，这对人类来说几乎是即时的。