Fatal编程技术网
  • javascript/
  • Javascript 非常大的单页应用程序设计问题

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

javascript jquery asp.net-mvc-4 angularjs

Javascript 非常大的单页应用程序设计问题,javascript,jquery,asp.net-mvc-4,angularjs,singlepage,Javascript,Jquery,Asp.net Mvc 4,Angularjs,Singlepage,我目前正在编写一个非常非常大的单页web/javascript应用程序 我使用的技术有ASP.NETMVC4、jquery、knockout.js和amplify.js 我遇到的问题是，大多数（如果不是所有的话）单页应用程序示例都适用于较小的应用程序，其中所有脚本模板（无论是jquery、Handlbar等）都与其他html代码位于同一文件中。这对于较小的应用程序来说很好，但我正在构建的应用程序是一个完整的维护物流应用程序，有很多很多很多屏幕 到目前为止，我采用的方法是我有一个外壳（我的main

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

我使用的技术有ASP.NETMVC4、jquery、knockout.js和amplify.js

我遇到的问题是，大多数（如果不是所有的话）单页应用程序示例都适用于较小的应用程序，其中所有脚本模板（无论是jquery、Handlbar等）都与其他html代码位于同一文件中。这对于较小的应用程序来说很好，但我正在构建的应用程序是一个完整的维护物流应用程序，有很多很多很多屏幕

到目前为止，我采用的方法是我有一个外壳（我的main 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

克里斯

更新

我想我应该发布一个最新消息，告诉大家事情进展如何，什么起作用了。经过大量研究，我决定使用谷歌的AngularJS Javascript框架。它以指数级的方式简化了痛苦，我绝对会建议所有想做大型水疗的人都去看看

链接：

主站点

关于Angular的精彩免费短片：

我建议使用Sammy.js并将knockout中的各种viewmodels拆分为一个单独的url。如果您使用的是asp.NETMVC4，请使用部分视图（用户控件），以便将所有代码放在一个文件中。并以有意义的方式命名和拆分所有js代码，包括js中的文件名和名称空间。从长远来看，这将在可维护性和您自己的理智方面有很大帮助。
运用常识

我这样做的方式是将与模板相关的javascript代码与模板本身一起包括在内。然后使用ajax加载整个模板+脚本。如果您想尝试此操作，请注意，大多数浏览器不会执行注入页面的
标记。尤其是使用
innerHTML
完成时。因此，您应该自己
eval
脚本标记（或者，您可以使用document.createElement注入脚本，但与eval相比，这并没有提供任何其他优势，因为浏览器无论如何都会盲目执行脚本）

在我的例子中，为了更容易获取模板的html和脚本部分，我将模板存储在XML文件中，而不是简单的旧html。这样，我就可以简单地使用ajax请求的
.responseXML
来解析模板。我的模板具有以下基本结构：

<template options...>
    <title>Optional</title>
    <html><![CDATA[

        Template body

    ]]></html>
    <init><![CDATA[

        // code that only needs to execute once

    ]]></init>
    <script><![CDATA[

        // code that needs to run every time
        // the template loads

    ]]></script>
</template>


可选的
您还需要记住将服务器配置为使用适合您的模板的正确内容类型进行回复。否则，
resultXML
将无法工作。当然，这不是实施这一制度的唯一途径。您可以简单地将模板保存为HTML，然后解析该HTML以提取要执行的脚本

js文件中可以包含大部分代码、函数、构造函数、对象等。模板脚本只需要调用这些函数来告诉页面的其余部分如何使用模板

/* mine/forms/Login.html */
<div>
    ${form_name}
    <label>Username</label>
    <input data-dojo-type="dijit.form.TextBox"
           data-dojo-attach-point="_usrfld" />
    <br />
    <label>Password</label>
    <input data-dojo-type="dijit.form.TextBox"
           data-dojo-props="type: 'password'"
           data-dojo-attach-point="_pwdfld" />
    <br />
    <input data-dojo-type="dijit.form.Button"
           data-dojo-props="label: 'Login'"
           data-dojo-attach-event="onClick:_handleLogin" />
</div>
如果进一步将数据与模板分离，并且仅使用页面上的数据填充模板，或者对JSON数据发出单独的ajax请求，则可以配置服务器以使浏览器缓存模板。这对于经常使用的模板（例如对话框模板）特别有用。这允许浏览器仅下载一次模板，并在下次调用模板时使用缓存版本

/* mine/forms/Login.html */
<div>
    ${form_name}
    <label>Username</label>
    <input data-dojo-type="dijit.form.TextBox"
           data-dojo-attach-point="_usrfld" />
    <br />
    <label>Password</label>
    <input data-dojo-type="dijit.form.TextBox"
           data-dojo-props="type: 'password'"
           data-dojo-attach-point="_pwdfld" />
    <br />
    <input data-dojo-type="dijit.form.Button"
           data-dojo-props="label: 'Login'"
           data-dojo-attach-event="onClick:_handleLogin" />
</div>
不管怎样，我上次就是这样做的。它的规模足以为facebook用户提供服务（该web应用程序是一个facebook应用程序）。只是分享我的经验。希望能有所帮助。

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

这似乎是合理的：

你至少会想要

  • 某种模块系统（我推荐AMD–）
  • MV*框架（主干、Ember.js等）
  • DOM/AJAX框架（jQuery、Mootools等）。一些框架提供了这一点以及以上所有内容（Dojo、YUI、Sencha）
  • 构建解决方案（在开发/生产中具有不同的环境）
两个好链接：

  • 这实际上是一个非常复杂的问题，因为它实际上涉及到架构的设计

    对于大型单页应用程序，最好使用某种前端MV*风格的框架，例如，它与jQuery的关联非常有用。您还应该考虑使用某种依赖关系管理框架，例如为了异步加载脚本和依赖关系，甚至更好——在应用程序设计中使用AMD模式，使您的体系结构模块化，更易于管理