Javascript web应用的最佳解决方案

Best solution for Javascript web app

本文关键字：最佳 解决方案 应用 web Javascript      更新时间：2023-09-26

我目前正在开发一个类似于Google Reader的web应用程序(至少在处理什么样的信息方面)。我已经用Javascript和jQuery构建了一个基本的原型，但我很快就发现它变得非常混乱，非常快。

所以今天我一直在看Javascript应用程序有哪些MVC框架。这是一种我熟悉的开发体系结构，它非常适合我正在尝试做的事情。我发现的一些替代方案是SprouteCore, Backbone.js和Knockout.js(不是MVC，但足够接近)。它们各有利弊，但我不确定哪一个适合我。

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

有什么想法我应该怎么做?我对Javascript不是很有经验，但我也不是完全没有经验。我已经考虑过将Backbone.js与icanhazs .js+Moustache.js结合起来，但我不完全确定这是否解决了我希望视图在模型发生变化时"自我更新"的问题。

您正在描述MVVM模式的属性。我已经成功地在几个解决方案中使用Knockout.js来实现类似于您想要做的事情。此外，Knockout为Ajax调用提供了一些方便的函数，但如果需要完全控制，您总是可以使用jQuery，或者两者都使用。

http://batmanjs.org/非常新，我认为它在更新视图方面完全符合您的需要。这是通过观察者模式完成的。他们有一些非常棒的概念，分离html和javascript，删除了很多通常需要做的事件绑定。值得一看。

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

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/!/指导/application_architecture

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

相关文章：