3

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

我有一个我正在构建的 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>

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

加载 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;
                });
4

1 回答 1

6

我不知道.load()，但是 JQuery 的.html(),.append()和其他一些相关函数会自动运行它们在给定 HTML 中找到的任何脚本标记。如果load()不为您这样做，那么它应该很容易使用$.get(..., function(){$('#myElement').html();});。您甚至可以专门为此目的编写自己的扩展。

样式表可能是另一回事。我通常每页只使用一个样式表。

编辑

我只是花了一些时间阅读你的问题，我意识到我没有完全回答。

我应该在应用程序的初始加载时加载每个脚本吗？

这实际上取决于脚本的大小以及您希望用户与系统交互的方式。在本次研讨会中，制作 Google Wave 的人谈论了他们如何解决这个问题。演讲者有一次说，“感知延迟是最重要的优化因素。” 问题是，在早期版本中，他们的 javascript 文件（由 GWT 优化和编译）只有几兆字节。连接速度较慢的人（例如手机浏览器）必须等待很长时间才能下载所有这些代码，然后才能看到收件箱中的内容。他们的解决方案是在他们的代码中创建“分割点”，以便可以分块加载。可以先加载显示收件箱所需的代码，而联系人面板可以等到用户单击“

但你可以把这走得太远。该视频中的另一位发言者表示，加载所花费的时间主要属于以下两类之一：

  • 获取您不需要的数据，以及
  • HTTP 请求过多

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

既然你说：

这个应用程序永远不会“那么大”

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

  1. 使用像Chirpy这样的工具将所有 javascript 文件合并到一个文件中（在不处于调试模式时可以自动缩小）。
  2. 如果您的应用程序有一个不使用所有这些 javascript 功能script的登录页面，请在登录页面底部添加此 javascript 文件的标签，以便用户的浏览器在用户忙于输入他们的文件时在后台下载文件用户名和密码。站点其余部分的母版页应仅在标准script标记中包含一次脚本文件。
  3. 确保您网站的缓存规则设置正确，以便用户的浏览器只请求该文件一次。
  4. 确保您的站点设置为压缩此 javascript 文件，因为 javascript（尤其是缩小的 javascript）非常适合 gzip 压缩。

完成此操作后，您应该会发现加载 javascript 文件时没有“感知延迟”。

如果您的应用程序最终变得“那么大”，您将希望像 Google Wave 团队那样将您的程序分解为模块。但是根据您期望系统的使用方式来选择您的模块。例如，如果只有一小部分用户可能会使用您的管理界面，那么您将希望将所有管理 UI 代码放入一个单独的模块中，“普通”用户永远不必下载。

在决定在哪里划线时，UI 专家基本上说五分之一秒是典型人类大脑开始思考的时间点，“这有效吗？” 如果用户单击一个按钮并且必须等待比这更长的时间才能看到发生的事情，那么您就达到了“感知延迟”的地步。除此之外的任何事情都会对用户变得越来越烦人。

于 2011-03-25T18:13:57.283 回答