asp.net - 去 "Stateless"并动态加载脚本

Question

我想知道的是我是否从正确的角度接近这个问题。

我有一个我正在构建的 asp.net 应用程序。我正在使用 Masterpage 来查看应用程序的整体外观(您可以在下面看到代码)。

我想让菜单系统使用像 jQuery 的 .load() 这样的动态负载。加载内容的功能。那很好，我把它记下来了。 .load()函数使用 innerHTML将该内容泵入页面。如果您想在该页面上加载特定于模块的脚本和样式，这是一个问题。

我的问题是，在这样的环境中，你们如何为这些模块加载脚本？我应该在应用程序的初始加载时加载每个脚本吗？这个应用程序永远不会“那么大”，但我想确保我做对了，以防万一。

主表

<div id="primaryNavigation">
    <ul>
        <li class="current"><a href="../Default.aspx">Main</a></li>
        <li><a href="../Modules/Page1.aspx">Some Overview</a></li>
        <li><a href="../Modules/Page2.aspx">Reporting</a></li>
        <li><a href="../Modules/Page3.aspx">More Reporting</a></li>
        <li><a href="../Modules/Page4.aspx">About</a></li>
    </ul>
</div>

<div id="mainContentContainer">
    <asp:ContentPlaceHolder ID="cphBody" runat="server" />
</div>

内容标签内的示例模块

<div id="container"> 
    Inside a page

    <script id="scriptToLoad" type="text/javascript">
      alert('Something');

      head.ready(function () { console.log('please print'); }); 
    </script>

</div>

<div id="includeScripts">
    ../Files/Javascript/SomeModuleSpecificJs.js
    ../Files/Javascript/SomeModuleSpecificJs1.js    
</div>

我的想法是建立一个 div在每个具有“includeScripts” id 的模块中，并从这样的母版表中的方法加载它们。这种方法有效(显然需要一些调整)但是如果用户继续点击模块，最终每个文件都会被加载。如果是这样的话，我不妨将它们全部加载到母版表上。

加载 MasterPage 时要运行的 JS

$navigation = $("#primaryNavigation").delegate('ul li a', 'click', function () {
                    $('#primaryNavigation').find('li').removeClass('current');
                    $(this).parent().addClass('current');

                    $('#mainContentContainer').load($(this).attr('href') + ' #container');

// Obviously this would overwrite the content from the container, this is merely proof of concept
                $('#mainContentContainer').load($(this).attr('href') + ' #includeScripts');

                    var jsArray = $('#includeScripts').text().trim().split("\n");

                    $.each(jsArray, function (index, value) {
                        $.getScript(value);
                    });

                    return false;
                });

Answer 1

我不知道 .load() , 但是 JQuery 的 .html() , .append() ，以及其他一些相关函数将自动运行它们在给定 HTML 中找到的任何脚本标记。如果 load()不适合你，它应该很容易使用 $.get(..., function(){$('#myElement').html();});反而。您甚至可以专门为此目的编写自己的扩展。
样式表可能是另一回事。我通常每页只使用一个样式表。
编辑
我只是花了一些时间阅读你的问题，我意识到我没有完全回答。

Should I load every script on the initial load of the app?

这实际上取决于脚本的大小以及您希望用户与系统交互的方式。在 this seminar ，制作 Google Wave 的人谈论他们是如何解决这个问题的。演讲者有一次说，“感知延迟是最重要的优化因素。”问题是，在早期版本中，他们的 javascript 文件(由 GWT 优化和编译)只有几兆字节。连接速度较慢的人(例如手机浏览器)必须等待很长时间才能下载所有这些代码，然后才能看到收件箱中的内容。他们的解决方案是在他们的代码中创建“分割点”，以便可以分 block 加载。可以首先加载显示收件箱所需的代码，而联系人面板可以等到用户单击“联系人”。
但你可以把这走得太远。该视频中的另一位发言者表示，加载所花费的时间主要属于以下两类之一:

获取您不需要的数据和

HTTP 请求过多

每个 HTTP 往返都涉及一定量的开销，因此加载一些您不需要的代码是值得的，以避免在您意识到需要时在几毫秒内进行另一次往返。
既然你说:

This app will not ever be "that big"

...我猜您可能主要属于后一类(HTTP 请求太多)。在这种情况下，最好的做法是:

使用像 Chirpy 这样的工具将所有 javascript 文件合并到一个文件中(在不处于 Debug模式时可以自动缩小)。

如果您的应用程序的登录页面没有使用所有这些 javascript 功能，请添加 script在登录页面底部为这个 javascript 文件添加标签，以便用户在忙于输入用户名和密码时，用户的浏览器将在后台下载文件。站点其余部分的母版页应仅在标准 script 中包含一次脚本文件。标签。

确保您网站的缓存规则设置正确，以便用户的浏览器只请求该文件一次。

确保您的站点设置为压缩此 javascript 文件，因为 javascript(尤其是缩小的 javascript)非常适合 gzip 压缩。

完成此操作后，您应该会发现加载 javascript 文件时没有“感知延迟”。
如果您的应用程序最终变得“那么大”，您将希望像 Google Wave 团队那样将您的程序分解为模块。但是根据您期望系统的使用方式来选择您的模块。例如，如果只有一小部分用户可能会使用您的管理界面，那么您将希望将所有管理 UI 代码放入一个单独的模块中，“普通”用户永远不必下载。
在决定在哪里划线时，UI 专家基本上说五分之一秒是典型人类大脑开始思考的时间点，“这有效吗？”如果用户单击一个按钮并且必须等待比这更长的时间才能看到发生的事情，那么您就达到了“感知延迟”的地步。除此之外的任何事情都会对用户变得越来越烦人。