Question

我的javascript技能非常基础，我可以使用jquery等。但是当涉及到建立像pivotaltracker这样的网站时，我不知道从哪里开始！

希望有人可以帮助打破他们的javascript架构并在高层次上解释他们如何设计他们的js frameowork以制作一个像javascript一样的设计gmail（至少我认为是）。

类似的事情：

布局明智，是否有一个div容器可以加载不同的面板？
是否保留所有故事的浏览器副本，并使用javascript模板构建html？
如何设计各种对象
我认为这是一个重要的事件，事件是如何联系起来的，是否是一个泡沫化的全球事件？

我认为有趣的是，页面上有大量的DOM元素，所有用户故事都组合在一起等等，所以他们必须做一些很酷的性能技术，特别是在事件等方面。

Answer 1

Pivotal Tracker UI（和js）非常类似于Google Wave（Wave in the Box）Wave protocol specification 所以我认为它有以下架构。

主页由html和js loader组成。 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>

模板由模板引擎编译并成为纯HTML代码。

事件处理程序不是全局的。每个小部件都自己创建事件处理程序。如果它是一个需要在每个小部件上触发的全局事件，那么loader（mediator）通过在其列表中注册的每个小部件上调用trigger方法（对于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 2

嗯，它肯定是一个很好的应用程序，最初看起来令人生畏。但是，如果将其分解为组件（例如页眉，正文，页脚，子窗口小部件），则逐个处理它们变得很容易。

从我看来，它是用各种“小部件”构建的。最重要的是，让我选择仪表板页面并向您展示如何设计它。

<强> 1。布局

从它看起来，它们有3列布局。您可以根据需要选择fixed layout或fluid layout。

如果你看一下关键，当你调整浏览器大小时面板调整大小时，它们会有一个流畅的仪表板布局。

在初始页面加载时，我会渲染三个带有加载符号的空面板。然后通过带数据的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插件，从中受益。最重要的是，如果您将继承模型添加到这些插件，您可以拥有可扩展的插件。这是一个很好的方法，对我来说非常好：attaching a class to a jQuery object

第3。对象设计

简短回答 - 以您的视图模型为基础。您发送给客户端的JSON对象应该是视图模型的一个子集，其中包含绘制窗口小部件并通过事件启用交互（密钥，ID等）所需的仅相关数据。

<强> 4。活动管理

对于活动管理，我的方式是：

每个小部件都是自包含的。从某种意义上说，它与页面上的其他小部件或其父级无关。
父级订阅子小部件上的事件。
2个小部件不互相交谈。
如果需要根据另一个事件中的某个事件进行更改，则该页面将成为代理。
页面侦听来自第一个窗口小部件的事件，并将调用触发到第二个窗口小部件，使其对更改做出反应。
数据从小部件1冒泡到页面，页面到小工具2。
小部件监听DOM事件（例如点击，鼠标悬停等）。他们捕捉事件，处理它们（提取数据，按摩数据等）和publish它们。

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

<强> 5。其他建议

使用javascript MVC框架，例如Backbone.js。
使用jQuery插件但要小心他们的表现。 jQuery UI，jScrollPane是非常好的插件，可以轻松构建您在关键跟踪器上看到的面板

正如您所看到的，这是一个非常广泛的主题，您可以在每个部分中尽可能深入。如果您有任何问题，请告诉我，我会尝试解释它们。

Answer 3

我使用负责逻辑的事件总线创建我的javascript应用程序。在那里插入业务规则，服务器交互，验证等。可视元素也通过该总线检索它们的数据。使用独立于MVC的MVC设计可视元素。如果代码被共享，它会获得一个插件（我在应用程序的botom上使用jQuery）。还有一位负责查找和显示组件的经理。它通过事件总线获取命令。

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

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

4 个答案: