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

发布于 2024-12-05 18:02:19 字数 949 浏览 4 评论 0原文

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

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

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

关于我应该如何解决这个问题有什么想法吗？我对 Javascript 没有太多经验，但我也不是完全不了解。我考虑过将 Backbone.js 与 ICanHaz.js+Moustache.js，但我不完全确定这是否解决了我希望视图在模型发生更改时“更新自身”的问题。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晌融 2024-12-12 18:02:20

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 命令。

Ext-JS, http://docs.sencha.com/ext-js/4-0/, has lots of data driven widgets, like trees, grids and dataviews

For example a grid's http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel data comes from a store http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store and as you add records to the store, the grid automatically updates its view

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

Beyond all this Ext also has an implementation of MVC on the client side. http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Ext stores can also use CRUD and automatically send request CREATE, READ, EDIT, DELETE commands as you add and remove records from the store.

回复收藏 0 原文