非常大的单页面应用程序设计问题

Question

我目前正在写什么是一个非常非常大的单页web/javascript应用程序.

我使用的技术是ASP.NET MVC4,jquery,knockout.js和amplify.js.

我遇到的问题是,大多数(如果不是全部)单页应用程序示例都适用于较小的应用程序,其中包含所有脚本模板(无论是jquery,handlbars等等)都与其他模板一起存在于同一个文件中的HTML代码.这适用于较小的应用程序,但我正在构建的应用程序是一个包含许多很多屏幕的整个维护物流应用程序.

到目前为止我采用的方法是我有一个外壳(我的主index.cshtml文件),我使用jquery的load()方法来加载或者更确切地注入用户进行特定选择时所需的特定文件.

例:

function handleLoginClick(){

    App.mainContentContainer.delegate('#btnLogin', 'click', function() {

        App.loadModule('Home/ProductionControlMenu', App.MainMenuView.render());

    });

}

这是App.loadModule函数的代码:

App.loadModule = function(path, callback){

    App.mainContentContainer.load(App.siteRoot + path, callback);

};

一切顺利,直到我需要实际开始与新加载的屏幕上的各种表单元素进行交互.jquery似乎无法直接处理它们.我不能使用.live()或.delegate(),因为它们不是事件,它们是文本框和按钮,有时我需要更改它们的css类.

我们发现的唯一方法是从外壳获取一个元素的句柄(没有通过.load()加载的东西)并使用jquery的.find()方法,如下所示:

  App.mainContentContainer.find('#btnLogin').addClass('disabled');

很明显,每次我需要与表单元素进行交互甚至检索值时,我都不想做这样的事情.

有没有人有任何想法,我如何创建一个可维护的非常大的单页面应用程序,可能有数百个.html文件,而不必将所有的HTML代码放在一个文件中,仍然解决这个.load()问题我是有？

任何想法将不胜感激.:-)

V/R

克里斯

UPDATE

我想我会发布一个更新,关于事情的进展和有效的方法.经过大量研究后,我决定采用Google的AngularJS Javascript框架.它以指数方式简化了考验,我绝对会建议所有正在考虑制作大型SPA的人来看看.

链接:

主站点 http://angularjs.org/

关于Angular的精彩免费短片:http: //www.egghead.io/

Answer 1

这实际上是一个非常复杂的问题,因为它真正归结为您的架构设计.

对于大型单页面应用程序,最好使用某种前端MV*样式框架,例如backbone.js,它与jQuery非常有用.您还应该考虑使用某种依赖管理框架(如require.js)来异步加载脚本和依赖项,甚至更好 - 在应用程序设计中使用AMD模式使您的架构模块化并更易于管理.

至于这与你的MVC4项目有什么关系,你有一些选择:

1. 您是否希望将MVC用作各种"服务层",只返回JSON对象,允许您的前端进行标记/模板创建(想想handlebars.js),或者
2. 您是否希望MVC项目将部分视图(HTML)作为响应返回,您可以利用Razor模板系统并使用前端显示从服务器返回的内容？

无论哪种方式,您都必须设计一种方法来处理前端事件和导航(骨干在与jQuery结合时提供这两种功能).更复杂的是您选择通知另一个视图的活动的一个视图的模式(有很多方法可以做到这一点) - 例如发布/订阅模式.

我希望我有所帮助,我知道我没有完全回答这个问题,但答案可能会很长!

Answer 2

你的方法有很多问题.我建议的是观看一些关于人们如何构建单页应用程序以及主要使用什么工具的演示文稿.

这似乎是合理的:http://singlepageappbook.com/

你至少会想要

• 某种模块系统(我推荐AMD -  http://requirejs.org)
• MV*框架(Backbone,Ember.js等)
• DOM/AJAX框架(jQuery,Mootools等).一些框架提供了这个和以上所有(Dojo,YUI,Sencha)
• 构建解决方案(在开发/生产中拥有不同的环境)

几个好的链接:

1. http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-talk
2. http://video.copenhagenjs.dk/video/3413395/simon-hjberg-swipely-building
3. http://backstage.soundcloud.com/2012/06/building-the-next-soundcloud/
4. http://www.youtube.com/watch?v=vXjVFPosQHw