Question

我们正在努力解决我们的解决方案（APS.NET Webforms）中JavaScript的正确实现。

根据最佳做法，我们希望在页面底部包含所有（或至少尽可能多）的javascript，因此页面首先加载HTML和CSS，并提供更好的用户体验。

我们的项目中有很多jQuery代码通常特定于某些控件，因此我们不希望在每个页面上加载。

目前jQuery本身，包括jQuery UI位于页面的顶部，因此我们可以在控件中使用jQuery（来自js文件或有时是内联代码），但是，我们希望将所有内容都移到页面底部。我们已经在页面底部添加了一个contentplaceholder（“JavascriptFooter”），因此我们可以从页面页脚中的页面放置javascript，但我们仍然停留在控件上。

这方面的最佳做法是什么？我们是否应该将所有JS外部化并在JS中检查是否加载了控件？但是我们会一直展示太多的东西。或者还有另一种方式吗？

Answer 1

首先，我建议从CDN加载Jquery。以下是Google的代码：

<script type="text/javascript">
    document.write(["\<script type='text/javascript' src='", 
    ("https:" == document.location.protocol) ? "https://" : "http://", 
    "ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>\<\/script>"].join(''));
</script>

这样，如果访问者已在另一个站点上提供此服务，则它已经被缓存。此外，它将从另一台主机交付时并行下载。

我也同意@ctorx - 您应该使用文档就绪执行。

此外，您可以使用ScriptManager并在每个控件的代码后面创建所有控件特定的JS（如果该控件是使用该JS的唯一对象，则可能是一个好主意） - 所有这些代码渲染在页面底部。

示例：

Page pg = (Page)System.Web.HttpContext.Current.Handler; // or this.Page in .ascx
ScriptManager.RegisterStartupScript(pg, typeof(Page), "myJS", "[... your code ]", true);

Answer 2

我敢打赌，除了有使用网络表单的公司之外，还有很多解决方案。也就是说，您始终可以使用请求上下文来存储必要的脚本，然后在页面呈现之前编写它们。

您也可以使用requireJS。我不是专家，但有很多选项，它会处理脚本加载超时，循环依赖，定义多个依赖等等。

Answer 3

首先，最好的方法是将JavaScript从JS文件中的控件外部化，该文件在第一次请求加载到您的站点和所有后续请求（即site.js）时加载。然后，浏览器将缓存此文件，并且用户不必像JS一样停留在控件中一遍又一遍地下载JS。

接下来，您需要创建一种机制，仅执行与执行页面或控件相关的脚本部分。

有几种方法可以达到这个目的，但如果我在你的情况下，我会这样做。

确定包含大部分内容的网页级元素...通常人们称之为wrapper。将自定义属性动态添加到名为“data-js”的包装器。从页面或用户/自定义控件动态（在服务器端）设置“data-js”的值。允许它有多个由管道（|）或其他字符分隔的键。

<div class="wrapper" data-js="funtion1|function2">
     <!-- Page content goes here -->
</div>

利用jQuery在DOM就绪上查找此属性，并根据data-js属性中的值执行自定义JS函数。该函数将仅包含与当前页面或控件相关的代码。

 $(function(){
    var funcKeys = $('.wrapper').attr('data-js');
    if(funcKeys != null)
    {
        var funcs = funcKeys.split('|');
        for(var i=0; i< funcs.length; i++) {
           var funcName = eval(funcs[i]);
           if(typeof funcName == 'function') {
                funcName();
           }
        }
    }    
});

使用这种方法，您只需要jQuery CDN参考，对您网站的JS文件的引用以及布局中的上述代码片段。

然后，您只需在特定于站点的JS文件中包含页面/控件特定功能，如下所示：

function function1() {
    alert("This is function 1");
}

function function2() {
    alert("This is function 2");
}

我希望这会有所帮助。

仅供参考，我还设置了一个小提琴，让你玩它是如何工作的： http://jsfiddle.net/hh84f/1/

ASP.NET Webforms，用户控件中的JavaScript

3 个答案: