我的JavaScript技能是相当基本的，我可以使用jquery等。但是，当涉及到构建诸如pivotaltracker之类的网站时，我不知道从哪里开始!
希望有人可以帮助分解他们的javascript体系结构，并在更高层次上解释他们如何设计js框架，以进行纯javascript驱动的gmail式设计(至少我认为是)。
像:
我认为有趣的是，页面上有DOM元素分配，所有用户故事都分组在一起，等等，因此他们必须做一些很酷的性能技术，尤其是在事件等方面。
最佳答案
我认为您的问题更多是关于了解javascript中的MVC(model-view-controller)模式。我认为您应该更新您的问题以反射(reflect)这一点。
诸如“帮助理解javascript中的MVC模式”之类的内容。
如果不提供带有示例和详细代码遍历的演示用例，很难理解javscript中的外观概念。我知道这实际上是您所要求的，但是我认为这超出了StackOverflow的范围。
例如，MVC模式相当熟悉，并广泛用于服务器端框架。
MVC模式与OOP(object oriented programming)的概念紧密相关。虽然遵循MVC模式，将语言面向对象并不是根本。在语言允许的范围内，许多MVC框架倾向于遵循OOP方法构建。
这是我认为MVC概念在前端开发中不那么普遍的原因之一。长期以来，Java语言一直被误解为一种语言。结果，直到最近人们才将OOP的原理应用到脚本中。
浏览器一致性和JQuery之类的库的改进与此有关。由于能够较少关注DOM中的不一致问题，因此人们可以意识到语言本身的核心方面。
(许多人仍然相信并且仍然认为浏览器不一致是JavaScript语言的错误，而不是DOM的浏览器供应商实现。这是对Javascript误解的根本原因。)
带着一点点烦恼，我将竭尽全力为您提供有关MVC的真正高级解释。
在MVC框架中，预先定义了模型， View ， Controller 及其交互方式的创建。他们这样做是为了保持项目清洁，并始终遵循相同的结构。这样做的好处是..
要了解他们如何在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创作技巧。
一些Javascript MVC框架
上面提到的一些框架的概述。
而且，如果您还没有读过精通的JavaScript，请不要忘记
希望这对于您来说是足够的信息。
关于javascript - 帮助从pivotaltracker的javascript中学习，寻找高层次的故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6718501/