走"无国籍"并动态加载脚本

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>

Content标记内的示例模块

<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"的模块,然后加载来自mastersheet中的方法的模块.此方法有效(显然需要一些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();});.您甚至可以专门为此目的编写自己的扩展程序.

样式表可能是一个不同的故事.我通常每页只使用一个样式表.

编辑

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

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

这实际上取决于脚本的大小以及您希望用户与系统交互的方式.在本次研讨会上,制作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专家基本上说五分之一秒是典型的人类大脑开始疑惑的地方,"这有用吗？" 如果用户点击某个按钮并且必须等待更长时间才能看到发生的事情,那么您已经达到了"感知延迟"的程度.除此之外的任何事情都会变得越来越烦人.