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

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

我敢打賭，有很多解決方案，因為有些公司使用webforms。 也就是說，您始終可以使用請求上下文來存儲必要的腳本，然后在頁面呈現之前編寫它們。

您也可以使用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/