6

We are struggling a little regarding the right implementation of JavaScript in our solution (APS.NET Webforms).

We want to have all (or at least as much as possible) of our javascript at the bottom of pages, according to best practice, so pages load HTML and CSS first and give a better user experience.

There is a lot of jQuery code throughout our project that is often specific to certain controls, so we don't want that to load on every page.

Currently jQuery itself, including jQuery UI are positioned at the top of pages, so that we can have jQuery usages in controls (either from js files or sometimes inline code), however, we want to move all that stuff down to the bottom of the page. We have already added a contentplaceholder ("JavascriptFooter") at the bottom of the page, so we can place javascript from pages in the footer of the page, but we're stuck on the controls.

What are best practices for this? Should we externalize all JS and in the JS check if a control is loaded? But then we will be showing too much stuff all the time. Or is there another way?

4

3 回答 3

4

首先，我建议从 CDN 加载 Jquery。这是谷歌的代码：

<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 - 您应该使用文档就绪执行。

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

例子：

Page pg = (Page)System.Web.HttpContext.Current.Handler; // or this.Page in .ascx
ScriptManager.RegisterStartupScript(pg, typeof(Page), "myJS", "[... your code ]", true);
于 2012-09-06T17:04:11.180 回答
1

I bet there are as many solutions to this as there are companies using webforms. That said, you can always use the request context to store the necessary scripts and then write them before the page renders.

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

于 2012-09-06T15:27:53.043 回答
1

首先，最好的方法是将 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/

于 2012-09-08T20:39:30.507 回答