帮助从pivotaltracker的javascript学习，寻找高级细目 [英] Help learning from pivotaltracker's javascript, looking for a high level breakdown

问题描述

我的javascript技能是相当基本的，我可以使用jquery等，但是当涉及到建立一个网站如pivotaltracker我不知道从哪里开始！

希望有人可以帮助打破他们的javascript架构，并在高层解释他们如何设计他们的js框架，使一个像Gmail的设计，它纯粹是由JavaScript驱动（至少我认为）。

例如：

1. 布局明智，有一个div容器加载不同的面板


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


3. / li>
   
4. 我认为这是一个主要的事件，这些事件是怎样发生的，是全球性的事件吗？

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

解决方案

我认为你的问题更多地是关于理解MVC（ model-view-controller ）模式。我想你应该更新你的问题以反映这一点。

像帮助理解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框架中创建的模型，视图，对象，对象，对象，控制器及其如何交互是预定义的。他们这样做是为了保持项目清洁，并遵循相同的结构。这个的好处是..

1. 新开发者更容易了解项目的进展。




2. 你在框架中工作的时间越多，你将越熟悉api。

要理解他们在javscript中如何做，你需要了解构造函数，原型和对象的工作原理。这些是JavaScript核心JavaScript语言的一些基本原理，有才华的JavaScript 是开始使用的好地方。

开始我不认为术语MVC是正确的顺序，以帮助可视化的内部流程的流程。不管这是有意的还是不知道我不知道，我想不同的人觉得不同的东西，但在我看来，MVC只是更容易说，听起来更好。

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

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

模型>>模型是关于数据的。它只有一个作业，建模数据。因此，模型通常会获取数据并验证或更改它的表示。模型还负责CRUD操作（创建，读取，更新，删除）。通常，对于通过应用运行的不同类型的数据，您都有单独的模型。例如用户，评论，帖子。

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

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

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

 例如。 http://myapp.com/users/>>用户控制器
  

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

 例如http://myapp.com/users/new/>>用户控制器呈现newUser视图
  

服务器端MVC框架使用URL片段来响应用户交互，没有直接访问用户交互（例如，服务器不能直接响应鼠标点击）。因此，强制而不是选择，服务器端应用程序以这种方式工作。

但在Javscript中，我们确实有这样的奢侈。我们可以向接口的部分添加事件处理程序，并直接响应用户交互。这种模式对于几乎每个JavaScript用户都是熟悉的。

例如。 （使用jQuery）

  //创建和事件处理程序
 $（'。myButton'）。bind '，function（event）{
 //在这个事件被触发时做一些工作
}）; 
  

然而，只是这样发生的微管理用户交互的能力，是一种低效的方法在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> key] +'< / li>'）
}; 
} 
}）; 
} 
  

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

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

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

这显然不是我们想要发生的。所以为了防止这个MVC框架使用一对夫妇的方法来改变浏览器的默认行为。第一种机制是防止所有链接点击出现默认值。

例如。

  $（'a'）。bind（'click'，function（event）{
 event.preventDefault ）; 
}）; 
 
 //这防止任何链接点击触发浏览器默认操作
 //向服务器发出请求并重新加载页面。 
  

为了更改URL，我们必须更新window.location对象，在链接href属性中。但是，只是更改window.location仍然会导致页面重新加载。为了达到这个目的，我们实际上改变了url以使用散列片段。 http://myapp.com/#/users 。当浏览器在URL中看到一个哈希时，它不会重新加载页面。历史上，哈希用于导航到现有页面内的一部分内容。

散列更新也会进入浏览记录，允许您使用浏览器回传和前进按钮进行浏览。

例如

  $（'a'）。bind单击'，函数（事件）{
 event.preventDefault（）; 
 var el = $（event.currentTarget）; 
 window.location.hash = el.attr（'href'） ; 
}）; 
 
 //真正的用例比这更复杂。 
 //此代码假设您的链接结构为
 //< a href =/ new / user>注册< / a> 
  

一个单独的函数将监视散列片段中的更改。这可能是在location.hash的setInterval（）的形式，将上一个片段与当前片段进行比较，或者由上述函数触发的自定义事件。

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

例如

  //创建您的控制器以侦听'/ user'片段
 var users = new Controller '）; 
 
 //对'/ user'片段更改运行的函数
 users.On = function（reqParams）{
 //做一些工作来响应http：// myapp .com /＃/ users; 
}; 
 
 
 
 //创建一个Controller作为用户的方法来响应'/ users / new'
 users.new = new Controller（'/ new '）; 
 
 //在'/ user / new'片段更改上运行的函数
 users.new.On = function（reqParams）{
 //做一些工作来响应http ：//myapp.com/#/users/new 
}; 
  

我不打算更多细节，MVC框架提供了不同的方法来实现和结构应用。此外，因为JavaScript确实具有直接响应用户交互的能力，所以不应该完全忽略该能力。因此，在一些JavaScript MVC框架中，他们稍微玷污纯MVC概念，允许更深入的交互控制。

我遇到了Ben Nadel这个视频教程探索MVC概念单页web应用程序。它是一个非常详细的步骤通过如何构建一个应用程序。

• http://www.bennadel.com/blog/1730-建筑 - 单页面应用程序 - 使用jQuery和ColdFusion-With-Ben-Nadel视频演示-htm

一些Javascript MVC框架

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




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




• < a href =http://www.bennadel.com/resources/projects/cormvc/demo/index.htm#/ =nofollow> http://www.bennadel.com/resources/projects/cormvc/




• 演示/索引。 http://javascriptmvc.com/




• http://knockoutjs.com/

上面提到的几个框架的概述。

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

如果您尚未阅读有口才的JavaScript，请不要忘记

• http://eloquentjavascript.net/

我希望这是您开始使用的足够信息。

My javascript skills are fairly basic, I can work with jquery etc. but when it comes to building a site like pivotaltracker I wouldn't know where to begin!

Was hoping someone could help break down their javascript architecture and explain at a high level how they went about designing their js frameowork to make a gmail like design where it is purely javascript driven (at least I think it is).

Things like:

1. layout wise, is there a single div container that loads the different panels?
2. Does it keep a browser copy of all the stories, and use javascript templating to build the html?
3. how are the various objects designed
4. I think this is a major one, how are the events wired up, is it a global event that bubbles up?

I think the interesting thing is that there are allot of DOM elements on a page with all the user stories grouped together etc., so they must have done some cool performance techniques especially around events etc.

解决方案

I think your question is more about understanding MVC (model-view-controller) patterns in javascript. I think you should update your question to reflect that.

Something like 'Help understanding MVC patterns in javascript'.

It's hard to distil the concept of what that looks like in javscript without providing a demo use case with examples and a detailed walk through of the code. I know that is essentially what you have asked for, but I think that is out of the remit of StackOverflow.

MVC patterns are fairly familiar and widely used in server side frameworks, for Example.

• PHP has CodeIgnighter
• Ruby has Rails
• Python has Django
• Java has Spring
• Plus many, many more variations for each language.

The MVC pattern is closely linked to the concept of OOP ( object oriented programming ). While it is not fundamental for a language to be object oriented in order to follow the MVC pattern. Many MVC frameworks tend to be built following OOP methodologies to the extent the language will allow.

This is one of the reasons I think the MVC concept is less prevalent in front-end development. For a long time Javascript has been a fairly mis-understood as a language. As a result it is only fairly recently that people have been applying the principles of OOP into javscript.

The improvement in browser conformance and libraries like JQuery has had a lot to do with this. Having the ability to focus less on the frustrations of inconsistencies in the DOM, Has allowed people to realize the core aspects of the language itself.

( Many people believed and still do, that browser inconsistencies are a fault of the JavaScript language, not the browser vendors implementation of the DOM. Which is the root cause behind the mis-understanding of Javascript. )

With that little rant out of the way, I will have a crack at giving you a really high level interpretation of MVC.

In MVC frameworks the creation of Models, Views, Controllers and how they interact is predefined. They do this to keep project clean and following the same structure throughout. The benefits of this are..

1. It's easier for new developers coming to the project to understand what's going on.

2. The more time you spend working in the framework, the more familiar you will become with the api's. So it speeds up development time.

3. The common structure and api's make it easier for you and others to maintain the codebase.

To understand how they do this in javscript you need to understand how constructor functions, prototypes and objects work. These are some of the fundamentals of the core JavaScript language and eloquent JavaScript is a good place to get started.

To start I don't think the term MVC is quite in the right order to aid visualising the flow of the internal processes. Whether this is intentional or not I don't know, I guess different people perceive things differently, but it seems to me that MVC is just easier to say and sounds better.

I prefer to think of it as CVM.

The key point of MVC frameworks is the separation of logic.

CONTROLLER >> The controller, is the functional part of the application, each controller deals with a specific aspect of user interaction. It then manages how that interaction should be handled by passing changes to the models and views, based on the input it received.

MODEL >> The Model is all about data. It only has one job, Model the data. So the Model would normally take data and validate or change it's representation. The Model also takes care of the CRUD operations ( Create, Read, Update, Delete ). You normally have a separate model for the different types of data running through your app. e.g. Users, Comments, Posts.

VIEW >> The View is the visual representation of the operation. It takes data from the model and generates the visual output. While the view generates the visual output, it is common that the view itself does not do the job of rendering it. It simply returns the visual representation to the controller for rendering. Views are not associated with whole pages, each view represents a different visual aspect of the application e.g. Sign in Dialog, New Comment etc.

By separating out different parts of an application like this. Many of the parts become interchangeable and re-usable by different controllers.

In backend MVC framework the user interaction they respond to is normally a page request. So the controllers listen to requests coming from the client. They use the url and query params to work out which controller is responsible for dealing with that request.

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

The controller may then use any subsequent part of the url to define what models and views it should use to respond.

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

Server side MVC frameworks use URL fragments to respond to user interaction, because they don't have access to the user interaction directly ( e.g. the server can't respond directly to a mouse click ). So it is more by force than choice that server side applications work this way.

In Javscript however we do have that luxury. We can add event handlers to parts of interface and respond directly to user interaction. This pattern is familiar to virtually every JavaScript user.

e.g. ( using jQuery )

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

It just so happens however that this ability to micro manage user interaction, is an inefficient approach in JavaScript intensive applications ( also known as single page web apps ). You end up with spaghetti code and duplication of functionality. As this approach tends to lead to someone encapsulating all the functionality into the function dealing with the interaction.

e.g.

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

So JavaScripts ability to deal directly with interaction, actually becomes a disadvantage. Having a global object such as the URL to respond to, makes modelling and separating parts of the application much easier to handle and conceptualise.

In theory you could create your own global object to store the application state and monitor for changes in your Controllers. However for most applications this is an unnecessary pursuit, it turns out that the URL object is both simple and highly effective for this operation. Because the URL contains a form of state in it's fragments, people can jump straight to specific parts of your application. If you implement your own object to do the job of the URL, the application would not have any knowledge of state prior to it's load. Any state at runtime would also be lost as soon as the page is closed. So the URL provides an excellent mechanism for persistent and transferable state ( as the URL can be shared ).

Therefore in most JavaScript MVC frameworks they use the URL over directly handling events. This presents some problems however, in order to change the URL a link has to be clicked. The browsers default behaviour is to send a request to the server for the new page and re render the entire page.

This is obviously not what we want to happen. So in order to prevent this MVC frameworks use a couple methods to alter the browsers default behaviour. The first mechanism is to prevent default on all link clicks.

e.g.

$('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.

In order to change the URL we have to update the window.location object to point to the URL contained in the the links href attribute. However just changing the window.location will still cause the page to be reloaded. In order to over come this we actually change the url to use the hash fragments e.g. http://myapp.com/#/users. When the browser see's a hash in the URL it does not reload the page. Historically the hash was used to navigate to a section of content within the existing page.

Hash updates also go into the browsing history, allowing you to navigate using the browsers back and forward button.

e.g.

$('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>

A separate function will monitor for changes in the hash fragment. This maybe in the form of a setInterval() on the location.hash that compares the previous fragment to the current one, or a custom event fired by the above function.

In order to allow the controllers to respond to the correct URL ( also referred to as Routes ), typically naming conventions on objects or methods are used.

e.g.

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

I'm not going to go into more detail, MVC frameworks provide different ways to implement and structure your application. Also because JavaScript does have the ability to directly respond to user interaction, that power shouldn't be completely ignored. So in some JavaScript MVC frameworks they slightly taint the pure MVC concept, to allow for deeper interaction control.

I came across this video tutorial by Ben Nadel exploring the MVC concept in single page web apps. It an extremely detailed walk through of how to structure an app. And also gives some great JavaScript authoring tips.

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

Some Javascript MVC Frameworks

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

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

• http://www.bennadel.com/resources/projects/cormvc/demo/index.htm#/ by Ben Nadel as a result of the presentation ( might be the best choice after watching the video ).

• http://javascriptmvc.com/

• http://knockoutjs.com/

An overview of a few of the frameworks mentioned above.

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

And don't forget to read eloquent JavaScript if you haven't already

• http://eloquentjavascript.net/

I hope this is enough info for you to get started.

这篇关于帮助从pivotaltracker的javascript学习，寻找高级细目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！