Javascript Web 应用程序的最佳解决方案

Question

我目前正在开发一个类似于 Google Reader 的网络应用程序（至少在处理什么样的信息方面）。我只使用普通的 Javascript 和 jQuery 构建了一个基本原型，但我很快发现它变得非常混乱，非常快。

所以今天我一直在研究针对 Javascript 应用程序有哪些 MVC 框架。这是我熟悉的开发架构，它非常适合我正在尝试做的事情。我发现的一些替代方案是SprouteCore、Backbone.js 和Knockout.js（不是 MVC，但足够接近）。它们各有优缺点，但我不确定哪一个适合我。

我需要的是一个框架，它允许我在模型更改时自动更新视图（因此，如果我在视图中显示数组中的所有项目，并且然后我将另一个项目添加到数组中，视图中的列表应该会自行更新），这允许我将我的 Javascript 与我的 HTML 完全分开（至少尽可能多）。如果它已经有一个很好的接口，可以通过 AJAX 调用从 RESTful API 获取模型的信息，则将获得加分 - 但这不是严格要求的。

关于我应该如何处理这件事有什么想法吗？我对 Javascript 的经验并不丰富，但我也不是完全湿透了。我已经研究过将 Backbone.js 与 ICanHaz.js+Moustache.js 结合使用，但我不完全确定这是否能解决我希望视图在模型发生更改时“自我更新”的问题。

Answer 1

您正在描述 MVVM 模式的特性。我已经在几个解决方案中成功地使用了 Knockout.js 来解决您想要做的事情。此外，Knockout 为 Ajax 调用提供了一些便利功能，但如果您需要完全控制，您可以始终使用 jQuery 或两者兼而有之。

Answer 2

http://batmanjs.org/ 是相当新的，我认为它正是您在更新视图方面所需要的。它是通过观察者模式完成的。他们有一些非常出色的概念，将 html 和 javascript 分离，删除了许多需要完成的常见事件绑定。很值得一看。

Mulberry 是另一个即将发布的框架，看起来很有前途http://mulberry.toura.com

Answer 3

Ext-JS，http://docs.sencha.com/ext-js/4-0/，有很多数据驱动的小部件，比如树、网格和数据视图

例如，网格的 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel 数据来自存储区 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store，当您将记录添加到存储区时，网格会自动更新其视图

Ext.define('ImageModel', {
    extend: 'Ext.data.Model',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});

var store = Ext.create('Ext.data.JsonStore', {
    model: 'ImageModel',
    proxy: {
        type: 'ajax',
        url: 'get-images.php',
        reader: {
            type: 'json',
            root: 'images'
        }
    }
});
// This will fetch JSON from the URL above and the grid updates once the load is completed
store.load();

// This is loading data inline if you don't want to automatically hook up to a URL
// Again, the view updates automatically when you update the underlying store
store.loadRecords({
   images: [
       {name: 'Anything', url: 'http://www.img.com/idkdk', size: 54545, lastmod: '2011-08-01T02:12:36'}          
   ]    
});

除此之外，Ext 还在客户端实现了 MVC。 http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Ext 存储也可以使用 CRUD 并在您从存储中添加和删除记录时自动发送请求 CREATE、READ、EDIT、DELETE 命令。