帮助学习pivotaltracker的javascript，寻找高级细分

Question

我的 JavaScript 技能相当基础，我可以使用 jquery 等，但是当涉及到构建像 Pivotaltracker 这样的网站时，我不知道从哪里开始！

希望有人可以帮助分解他们的 javascript 架构，并在高层次上解释他们如何设计他们的 js 框架来制作类似 gmail 的设计，其中它是纯粹由 javascript 驱动的（至少我认为是）。

比如：

1. 布局方面，是否有一个单独的 div 容器可以加载不同的面板？
2. 它是否保留所有故事的浏览器副本，并使用 JavaScript 模板来构建 html？
3. 各种对象是如何设计的
4. 我认为这是一个主要的，事件是如何连接的，它是一个冒泡的全局事件吗？

我认为有趣的是，页面上有分配的 DOM 元素，所有用户故事都分组在一起等，所以他们一定做了一些很酷的性能技术，特别是围绕事件等。

Answer 1

我认为你的问题更多的是关于理解 MVC (model-view -controller) JavaScript 中的模式。我认为你应该更新你的问题以反映这一点。

类似“帮助理解 javascript 中的 MVC 模式”之类的内容。

如果不提供带有示例的演示用例和详细的代码演练，就很难提炼出 javscript 中的概念。我知道这本质上就是您所要求的，但我认为这超出了 StackOverflow 的职权范围。

例如，MVC 模式在服务器端框架中相当熟悉并广泛使用。

• PHP 有 CodeIgnighter
• Ruby 有 Rails
• Python 有 Django
• Java 有 Spring
• 加上每种语言有很多很多的变体。

MVC 模式与 OOP 的概念密切相关（面向对象编程）。虽然语言为了遵循 MVC 模式而面向对象并不是基础。许多 MVC 框架倾向于在语言允许的范围内遵循 OOP 方法来构建。

这是我认为 MVC 概念在前端开发中不太流行的原因之一。很长一段时间以来，Javascript 一直被误解为一种语言。因此，直到最近人们才将 OOP 原理应用到 javscript 中。

浏览器一致性和 JQuery 等库的改进与此有很大关系。能够较少关注 DOM 中不一致的挫败感，使人们能够认识到语言本身的核心方面。

（许多人相信并且仍然相信，浏览器不一致是 JavaScript 语言的错误，而不是浏览器供应商对 DOM 的实现。这是误解 Javascript 背后的根本原因。

） ，我将尽力为您提供 MVC 的真正高级解释。

在 MVC 框架中，模型、视图、控制器的创建以及它们的交互方式是预定义的。他们这样做是为了保持项目干净并始终遵循相同的结构。这样做的好处是..

1. 新加入项目的开发人员更容易了解正在发生的事情。

2. 您在框架中花费的时间越多，您就会对 API 越熟悉。因此它可以加快开发时间。

3. 通用结构和 API 使您和其他人更容易维护代码库。

要了解它们如何在 JavaScript 中执行此操作，您需要了解构造函数、原型和对象如何工作。这些是核心 JavaScript 语言的一些基础知识，eloquent JavaScript 是一个很好的起点。

首先，我认为 MVC 一词不太适合帮助可视化内部流程的流程。我不知道这是有意还是无意，我猜不同的人对事物的看法不同，但在我看来，MVC 只是说起来更容易，听起来更好。

我更喜欢将其视为 CVM。

MVC框架的关键点是逻辑的分离。

控制器>>控制器是应用程序的功能部分，每个控制器处理用户交互的特定方面。然后，它根据收到的输入，通过将更改传递给模型和视图来管理如何处理交互。

型号>>该模型完全与数据有关。它只有一项工作：对数据建模。因此，模型通常会获取数据并验证或更改其表示。该模型还负责 CRUD 操作（创建、读取、更新、删除）。您通常对应用程序中运行的不同类型的数据有一个单独的模型。例如用户、评论、帖子。

查看>>视图是操作的可视化表示。它从模型中获取数据并生成视觉输出。虽然视图生成视觉输出，但通常视图本身并不执行渲染它的工作。它只是将视觉表示返回给控制器进行渲染。视图不与整个页面关联，每个视图代表应用程序的不同视觉方面，例如登录对话框、新评论等。

通过像这样分离出应用程序的不同部分。许多部件可以由不同的控制器互换和重复使用。

在后端 MVC 框架中，它们响应的用户交互通常是页面请求。因此控制器监听来自客户端的请求。他们使用 url 和查询参数来确定哪个控制器负责处理该请求。

e.g. http://myapp.com/users/ >> user Controller

然后，控制器可以使用 url 的任何后续部分来定义它应该使用哪些模型和视图来响应。

e.g. http://myapp.com/users/new/ >>  user Controller renders the newUser View

服务器端MVC 框架使用URL 片段来响应用户交互，因为它们无法直接访问用户交互（例如，服务器无法直接响应鼠标单击）。因此，服务器端应用程序以这种方式工作更多的是出于强制而不是选择。

然而，在 Javscript 中我们确实拥有这种奢侈。我们可以将事件处理程序添加到界面的某些部分并直接响应用户交互。几乎每个 JavaScript 用户都熟悉这种模式。

例如（使用 jQuery）

// Create and event handler
$('.myButton').bind('click', function(event){
    // Do some work when this event is fired.
});

然而，这种微管理用户交互的能力在 JavaScript 密集型应用程序（也称为单页 Web 应用程序）中是一种低效的方法。你最终会得到意大利面条式的代码和重复的功能。因为这种方法往往会导致有人将所有功能封装到处理交互的函数中。

例如

$('myButton').bind('click', function(event){
    var self = $(this);
    event.preventDefault();

    $.ajax({
        url: self.attr('href'),
        context: self.parents('.ResponseContainer'),
        success: function(data){
            self.addClass('.workDone');
            for( key in data ){
                $(this).append('<li>'+data[key]+'</li>')
            };
        }   
    }); 
});

，JavaScript 直接处理交互的能力实际上成为了一个缺点。拥有一个全局对象（例如要响应的 URL）可以使应用程序的建模和分离部分更容易处理和概念化。

理论上，您可以创建自己的全局对象来存储应用程序状态并监视控制器中的更改。然而对于大多数应用程序来说这是不必要的追求，事实证明 URL 对象对于此操作既简单又高效。由于 URL 的片段中包含某种形式的状态，因此人们可以直接跳转到应用程序的特定部分。如果您实现自己的对象来完成 URL 的工作，则应用程序在加载之前不会了解任何状态。一旦页面关闭，运行时的任何状态也会丢失。因此，URL 为持久性和可转移状态提供了一种出色的机制（因为 URL 可以共享）。

因此，在大多数 JavaScript MVC 框架中，它们使用 URL 而不是直接处理事件。然而，这会带来一些问题，为了更改 URL，必须单击链接。浏览器的默认行为是向服务器发送新页面的请求并重新呈现整个页面。

这显然不是我们希望发生的事情。因此，为了防止这种 MVC 框架使用几种方法来改变浏览器的默认行为。第一个机制是防止所有链接点击的默认设置。

例如，

$('a').bind('click', function(event){
    event.preventDefault(); 
});

// This prevents any link clicks from firing the browsers default action
// of making a request to the server and reloading the page.

为了更改 URL，我们必须更新 window.location 对象以指向 links href 属性中包含的 URL。然而，仅更改 window.location 仍会导致页面重新加载。为了克服这个问题，我们实际上更改了 url 以使用哈希片段，例如 http://myapp.com/#/用户。当浏览器看到 URL 中的哈希值时，它不会重新加载页面。从历史上看，哈希用于导航到现有页面中的内容部分。

哈希更新也会进入浏览历史记录，允许您使用浏览器的后退和前进按钮进行导航。

例如，

$('a').bind('click', function(event){
    event.preventDefault();
    var el = $(event.currentTarget);
    window.location.hash = el.attr('href');
});

// A real use case would be much more complex than this.
// This code assumes you have a link structured like 
// <a href="/new/user">Sign up</a>

一个单独的函数将监视哈希片段的变化。这可能采用 location.hash 上的 setInterval() 形式，将前一个片段与当前片段进行比较，或者由上述函数触发的自定义事件。

为了允许控制器响应正确的 URL（也称为路由），通常使用对象或方法的命名约定。

例如，

//Create your controller to listen to '/user' fragments
var users = new Controller('/users');

// function to run on '/user' fragment changes
users.On = function(reqParams){
    // do some work to respond to http://myapp.com/#/users; 
};



// create a Controller as a method of users, to respond to '/users/new'
users.new = new Controller('/new');

// function to run on '/user/new' fragment changes
users.new.On = function(reqParams){
    // do some work to respond to http://myapp.com/#/users/new          
};

我不打算详细介绍，MVC 框架提供了不同的方法来实现和构建应用程序。另外，由于 JavaScript 确实具有直接响应用户交互的能力，因此不应完全忽视这种能力。因此，在一些 JavaScript MVC 框架中，它们稍微污染了纯 MVC 概念，以允许更深入的交互控制。

我看到 Ben Nadel 制作的这个视频教程，探索单页 Web 应用程序中的 MVC 概念。它非常详细地介绍了如何构建应用程序。并且还提供了一些很棒的 JavaScript 创作技巧。

• http://www.bennadel.com/blog/1730-Building-Single-Page-Applications-Using-jQuery-And-ColdFusion-With-Ben-Nadel-Video-Presentation-.htm

一些 Javascript MVC 框架

• http://documentcloud.github.com/backbone/

• http://maccman.github .com/spine/

• http://www.bennadel.com/resources/projects/cormvc/demo/index.htm#/ 由 Ben Nadel 作为演示的结果（可能是观看后的最佳选择视频）。

• http://javascriptmvc.com/

• http://knockoutjs. com/

上面提到的一些框架的概述。

• http://www.protectedmethod.com/blog/4d49b82942ba7864ce00000d/knockout_vs_javascriptmvc_vs_backbone

如果您还没有阅读过 eloquent JavaScript，请不要忘记

• http://eloquentjavascript.net/

我希望这些信息足以帮助您入门。

Answer 2

Pivotal Tracker UI（和 js）与 Google Wave (Wave in the Box) 非常相似Wave 协议规范
所以我认为它具有以下架构。

主页由 html 和 js 加载器组成。 Html 很简单——只是一个没有内容的div。加载器在页面加载时运行，就像这样。

$(document).ready(function(){
        $("#main_holder").buildPage("home"); // jquery example
});

该函数运行 2 个任务：

• 加载数据（例如通过 AJAX）
• 使用加载的数据构建 UI

加载数据是清除操作。构建 UI 更加复杂。
UI 使用简单的控件 - 小部件（或某种小部件）构建。每个小部件都有一个代码来构建自身并初始化事件处理程序。每个加载的小部件都在加载器（或中介器）中注册，因此它可以通过加载器访问其他小部件数据。

为了为每个小部件构建 html，使用了模板（某种 JSP 模板）。模板示例

    <li class="task_<%=id%> <%= readOnly ? 'readonly' : '' %>">
  <% if (!readOnly) { %>
    <input type="checkbox" name="task[complete_<%=id%>]" value="1" <%= complete ? "checked='checked'" : "" %>/>
    <div style="display:none"><textarea class="autoresize expand17-10000" name="task[description_<%=id%>]"><%= description %></textarea></div>
  <% } else { %>
    <div><%= position %>.</div>
  <% } %>
  <label <%= complete ? "class='completed'" : "" %>><%= Element.formatText(description) %></label>
  <% if (!readOnly) { %>
    <ul class="actions">
      <li class="edit"><a href="#" title="Edit Task"><img src="<%= edit_img_src %>" /></a></li>
      <li class="delete"><a href="#" title="Delete Task"><img src="<%= delete_img_src %>" /></a></li>
    </ul>
  <% } %>
</li>

Template 经模板引擎编译后成为纯html 代码。

事件处理程序不是全局的。每个小部件都会自行创建事件处理程序。如果它是一个全局事件，需要在每个小部件上触发，则加载器（中介器）通过在其列表中注册的每个小部件上调用触发器方法（对于 jquery）来触发它。

各种对象被设计为关联数组。就像

    org.pivotal.model.vo.VariousObjectVO = new Class({
      /**
       *
       * @param {Long} id
       * @param {String} name
       * @param {Map<String, String>} fields
       * 
       */
       initialize: function(){

       },
       id: null,
       name: "",
       fields: {}
    });

这样，您可以保留任意数量的字段和任意数量的值。

希望有帮助。

问候，
谢尔盖

Answer 3

嗯，它确实是一个很好的应用程序，并且最初看起来令人畏惧。但是，如果将其分解为组件（例如页眉、正文、页脚、子小部件），则一一处理它们就会变得很容易。

据我所知，它是用各种“小部件”构建的。首先，让我选择仪表板页面并向您展示如何设计它。

1.布局

从表面上看，它们有 3 列布局。您可以选择固定布局或根据您的需要，流畅布局。

如果你看一下 Pivotal，就会发现它们的仪表板布局很流畅，因为当你调整浏览器大小时，面板也会调整大小。

在初始页面加载时，我将渲染三个带有加载标志的空面板。然后通过 ajax 调用用数据填充它们。
- 您可以使用服务器端渲染（并将整个 HTML 返回给客户端
- 或者，只需从服务器取回数据并使用客户端模板将它们绑定到客户端（首选，因为它避免了标记标签的往返）

2。客户端模板

这个想法是，您通过 Ajax 调用获取数据，然后使用客户端模板引擎将数据与模板标记绑定，以生成所需的输出标记。

加载小部件的伪代码：

 1. Getdata  // $.ajax() or any other way
 2. Bind data to template (using underscore templates or other templating engines)
 3. Append the HTML to the panels

根据我的经验，我找到了 Underscore.js 模板非常简单和快速（我推荐它们而不是 jQuery 模板）

HTML 模板及其相应的脚本将构成一个 widget。

您可以从将这些小部件设计为 jQuery 插件中受益。最重要的是，如果您向这些插件添加继承模型，您就可以拥有可扩展的插件。这是一个对我来说非常有效的方法： 附加类到 jQuery 对象

3.对象设计

简短的回答 - 基于您的视图模型。您发送到客户端的 JSON 对象应该是视图模型的子集，仅包含绘制小部件并通过事件启用交互（键、id 等）所需的相关数据。

4.事件管理

对于事件管理，我的方法是：

• 每个小部件都是独立的。从某种意义上说，它与页面或其父级上的其他小部件无关。
• 父控件订阅子控件上的事件。
• 2 个小部件不会互相通信。
• 如果一个页面需要根据另一个页面中的某些事件进行更改，则该页面将成为代理。
• 页面侦听来自第一个小部件的事件并向第二个小部件触发调用，使其对更改做出反应。
• 数据从小部件 1 冒泡到页面，再从页面冒泡到小部件 2。
• 小部件侦听 DOM 事件（例如单击、鼠标悬停等）。他们捕获事件、处理它们（提取数据、按摩数据等）并发布它们。

您可以为此使用 jQuery 自定义事件，但为了获得最佳性能，使用 Dojo 的作者 Peter Higgins 创建的 jQUery 插件： pubsub js

5.其他建议

• 使用 javascript MVC 框架，例如 Backbone.js。
• 使用 jQuery 插件但要注意它们的性能。 jQuery UI、jScrollPane 都是优秀的插件，可以轻松构建您在关键跟踪器上看到的面板

如您所见，这是一个非常广泛的主题，您可以在每个部分中按照您的意愿深入。如果您有任何疑问，请告诉我，我会尽力解释。

Answer 4

我使用负责逻辑的事件总线创建我的 JavaScript 应用程序。其中插入了业务规则、服务器交互、验证等。视觉元素也通过该总线检索其数据。视觉元素使用彼此独立的 MVC 进行设计。如果代码被共享，它就会获得一个插件（我在应用程序的最底层使用 jQuery）。还有一个管理器负责查找和显示组件。它通过事件总线获取命令。

我喜欢这种设计，因为它非常灵活，并且非常适合为事件处理而设计的 javascript 语言。