Question

我想知道的是，如果我从正确的角度接近这一点。

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

我想让菜单系统使用像jQuery的.load()函数这样的动态加载来加载内容。那很好，我把它弄下来了。 .load()函数使用innerHTML将该内容抽入页面。如果在该页面上要加载特定于模块的脚本和样式，则会出现此问题。

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

MasterSheet

<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，其ID为“includeScripts”，并从主题表中的方法加载，如下所示。此方法有效（显然需要一些tweeking）但是如果用户不断点击模块，最终将加载每个文件。如果是这样的话我也可以在主板上加载它们。

在加载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();});。您甚至可以专门为此目的编写自己的扩展程序。

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

修改

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

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

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

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

获取您不需要的数据，
HTTP请求太多

每次HTTP往返都涉及一定的开销，所以加载一些你不需要的代码是值得的，以避免不得不再进行一次往返当你意识到自己需要它时，几毫秒。

既然你说：

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

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

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

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

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

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

走“无国籍”并动态加载脚本

1 个答案:

修改