javascript - 帮助从pivotaltracker的javascript中学习，寻找高层次的故障

Question

我的JavaScript技能是相当基本的，我可以使用jquery等。但是，当涉及到构建诸如pivotaltracker之类的网站时，我不知道从哪里开始!

希望有人可以帮助分解他们的javascript体系结构，并在更高层次上解释他们如何设计js框架，以进行纯javascript驱动的gmail式设计(至少我认为是)。

像:

布局明智，是否有单个div容器加载不同的面板？

它是否保留所有故事的浏览器副本，并使用javascript模板来构建html？

各种对象如何设计

我认为这是一个重要事件，这些事件如何关联，这是一个全局性事件吗？

我认为有趣的是，页面上有DOM元素分配，所有用户故事都分组在一起，等等，因此他们必须做一些很酷的性能技术，尤其是在事件等方面。

Answer 1

我认为您的问题更多是关于了解javascript中的MVC(model-view-controller)模式。我认为您应该更新您的问题以反射(reflect)这一点。

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

如果不提供带有示例和详细代码遍历的演示用例，很难理解javscript中的外观概念。我知道这实际上是您所要求的，但是我认为这超出了StackOverflow的范围。

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

PHP具有CodeIgnighter

Ruby有Rails的

Python具有Django

Java具有Spring

每种语言还有许多其他变体。

MVC模式与OOP( object oriented programming)的概念紧密相关。虽然遵循MVC模式，将语言面向对象并不是根本。在语言允许的范围内，许多MVC框架倾向于遵循OOP方法构建。

这是我认为MVC概念在前端开发中不那么普遍的原因之一。长期以来，Java语言一直被误解为一种语言。结果，直到最近人们才将OOP的原理应用到脚本中。

浏览器一致性和JQuery之类的库的改进与此有关。由于能够较少关注DOM中的不一致问题，因此人们可以意识到语言本身的核心方面。

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

带着一点点烦恼，我将竭尽全力为您提供有关MVC的真正高级解释。

在MVC框架中，预先定义了模型， View ， Controller 及其交互方式的创建。他们这样做是为了保持项目清洁，并始终遵循相同的结构。这样做的好处是..

新来的开发人员可以更轻松地了解项目的进展。

在框架中花费的时间越多，您对api的熟悉程度就越高。因此，它加快了开发时间。

通用的结构和api使您和其他人可以更轻松地维护代码库。

要了解他们如何在javscript中执行此操作，您需要了解构造函数，原型(prototype)和对象的工作方式。这些是核心JavaScript语言的一些基础知识， eloquent JavaScript是入门的好地方。

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

我更喜欢将其视为CVM。

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

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

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

View >> View 是操作的直观表示。它从模型中获取数据并生成可视输出。当 View 生成视觉输出时，通常 View 本身不执行呈现它的工作。它只是将视觉表示返回给 Controller 进行渲染。 View 并不与整个页面相关联，每个 View 代表应用程序的不同视觉方面，例如登录对话框，新评论等。

通过分离这样的应用程序的不同部分。许多部件可以由不同的 Controller 互换和重用。

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

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

然后， Controller 可以使用url的任何后续部分来定义应用于响应的模型和 View 。

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

因此，JavaScripts直接处理交互的能力实际上成为一种劣势。拥有诸如URL之类的全局对象来响应，使得建模和分离应用程序的各个部分变得更加容易处理和概念化。

理论上，您可以创建自己的全局对象来存储应用程序状态并监视Controller中的更改。但是，对于大多数应用程序来说，这是不必要的追求，事实证明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/#/users。当浏览器在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()的形式进行，该setInterval()将先前的片段与当前片段进行比较，或者是上述函数触发的自定义事件。

为了允许 Controller 响应正确的URL(也称为Routes)，通常使用对象或方法的命名约定。

例如

//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/

演示的结果是Ben Nadel的

http://www.bennadel.com/resources/projects/cormvc/demo/index.htm#/(观看视频后可能是最佳选择)。

http://javascriptmvc.com/

http://knockoutjs.com/

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

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

而且，如果您还没有读过精通的JavaScript，请不要忘记

http://eloquentjavascript.net/

希望这对于您来说是足够的信息。