當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

高效管理ASP.NET的JavaScript库

發布時間：2023/12/18 asp.net 36 豆豆

生活随笔收集整理的這篇文章主要介紹了高效管理ASP.NET的JavaScript库小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡介

對于ASP.NET開發人員來說,管理項目中的JavaScript都很隨意：

我想這很大程度上可能是因為網上沒有如何妥善處理ASP.NET中JavaScript的可靠信息。此文的目的就是提供一種最佳方案，用于管理ASP.NET中的JavaScript。該方案將能解決以下問題：

內聯JS：把JS直接放在頁面中將導致頁面臃腫不堪。
發布JS：經常忘記發布JS文件。
錯誤引用：在其它Web程序中引用JS時經常失敗。
依賴性：需要記住JS文件中錯綜復雜的依賴關系。
無效引用：頁面上引用的JS從來沒有被用到。
HTTP/HTTPS：跨HTTPS頁面引用HTTP的JS。
重構：重構一個新版本將花費大量時間。
冗余：多次引用統一個JS文件。

預備知識

確保已安裝Visual Studio 2010。Express版可能不支持此文涉及到的一些概念。

概述

大部分上述問題是由把JS或JS文件引用直接放到ASPX頁面引起的。對幾乎所有上述問題的解決方法是使用ASP.NET的內置功能來嵌入JS文件到一個DLL，然后動態引用這些文件。本文將演示這些功能，以及一些充分使用它們的技巧。接下來我們將逐步介紹該如何實現。

開始

第一步，啟動Visual Studio 2010,并新建一個名為ParchmentPurveyor的空Web程序。

接下來添加一個窗體：Default.aspx，并添加一些簡單的HTML代碼。大致如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="ParchmentPurveyor.Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Parchment Purveyor</title>
</head>
<body>
<form id="form1" runat="server">
<h1>Parchment Purveyor</h1>
<p>Paper for printers, painting, publication,
paper planes, and plenty of other plebeian projects!</p>
</form>
</body>
</html>

添加JS

不同于在站點中添加JS文件，我們新建一個項目，用于包含我們所有的JS文件。在解決方案中添加一個新的類庫項目JavaScriptLibrary：

項目添加后刪除Class1.cs文件，右鍵項目，選擇添加文件夾，并命名為JavaScript，然后在該文件夾中添加兩個JS文件，分別為ShowMessage.js和GreetUser.js，下一步，在項目中添加一個類JavaScriptHelper（注意不要放到JavaScript目錄下），現在解決方案目錄結構如下：

接下來編寫JS，在ShowMessage.js中添加如下代碼：

function ShowMessage(msg) {
alert("Message From Website: " + msg);
}

在GreetUser.js文件中添加如下代碼：

function GreetUser() {
ShowMessage("Greetings and Salutations!");
}

注意，GreetUser()依賴于ShowMessage()。

嵌入JS文件

相比把JS文件發布到站點，我們更樂于把它們嵌入到DLL。這樣子，如果DLL被發布到站點，那么所有JS文件也被自動發布。做到一點很簡單，我們只需要右鍵JS文件，打開屬性頁，為“生成操作”選擇“嵌入資源”即可，如下：

在確定JS文件嵌入DLL后，你需要使它們能夠被Web用戶訪問。為此，需要為項目JavaScriptLibrary添加System.Web的引用：

然后編輯JavaScriptHelper.cs,添加如下代碼：

using System.Web.UI;

[assembly: WebResource("JavaScriptLibrary.JavaScript.ShowMessage.js", "application/x-javascript")]
[assembly: WebResource("JavaScriptLibrary.JavaScript.GreetUser.js", "application/x-javascript")]

這樣就能保證Web用戶通過客戶端訪問嵌入式JS文件了。

引用嵌入式JS文件

現在你已嵌入了JS文件，并能通過客戶端電腦訪問它們。在使用的時候，你必須在頁面上引用它們。為此，需要對JavaScriptHelper類做如下修改：

using System;
using System.Web.UI;

[assembly: WebResource("JavaScriptLibrary.JavaScript.ShowMessage.js", "application/x-javascript")]
[assembly: WebResource("JavaScriptLibrary.JavaScript.GreetUser.js", "application/x-javascript")]

namespace JavaScriptLibrary
{

/// <summary>
/// 幫助頁面引用嵌入式JS文件
/// </summary>
public class JavaScriptHelper{

#region 靜態字段
private const string NAME_SHOW_MESSAGE = "JavaScriptLibrary.JavaScript.ShowMessage.js";
private const string NAME_GREET_USER = "JavaScriptLibrary.JavaScript.GreetUser.js";
#endregion

#region 公共方法
/// <summary>
/// 在頁面上引用ShowMessage.js文件
/// </summary>
/// <param name="manager">通過Page.ClientScript訪問</param>
public static void Include_ShowMessage(ClientScriptManager manager){
IncludeJavaScript(manager, NAME_SHOW_MESSAGE);
}

/// <summary>
/// 在頁面上引用GreetUser.js文件 (包括所有依賴文件)
/// </summary>
/// <param name="manager">通過Page.ClientScript訪問</param>
public static void Include_GreetUser(ClientScriptManager manager){
//依賴(ShowMessage.js).
Include_ShowMessage(manager);
//引用 GreetUser.js.
IncludeJavaScript(manager, NAME_GREET_USER);
}
#endregion

#region 私有方法
/// <summary>
/// 在頁面上引用指定的嵌入式js文件
/// </summary>
/// <param name="manager">通過Page.ClientScript訪問</param>
/// <param name="resourceName">用于標示嵌入式JS文件的名字</param>
private static void IncludeJavaScript(ClientScriptManager manager, string resourceName){
var type = typeof(JavaScriptLibrary.JavaScriptHelper);
manager.RegisterClientScriptResource(type, resourceName);
}
#endregion
}
}

IncludeJavaScript()是關鍵所在。它通過調用RegisterClientScriptResource()確保為嵌入式JS文件獲取一個腳本標簽。Include_GreetUser()調用了IncludeJavaScript()，同時也調用了Include_ShowMessage()（用于處理依賴關系）。因此，任何頁面在引用GreetUser()時也將引用ShowMessage()。

現在我們有了可用的類，接下在讓我們在Default.aspx頁面中試用它。首先在站點ParchmentPurveyor中添加對JavaScriptLibrary的引用：

接下來我們需要修改引用JS頁面的后臺代碼。

using System;
using System.Web.UI;

namespace ParchmentPurveyor
{
public partial class Default : System.Web.UI.Page{
protected override void OnPreRender(EventArgs e){
base.OnPreRender(e);
JavaScriptLibrary.JavaScriptHelper.Include_GreetUser(Page.ClientScript);
}
}
}

最后，還有一件事要做——從頁面調用GreetUser()。為此，我們需要在頁面中添加如下JS（我選擇把它添加到<head>標簽中）：

<head runat="server">
<title>Parchment Purveyor</title>
<script type="text/javascript">
window.onload = function () { GreetUser(); };
</script>
</head>

好了，除了還有一些瑣碎的事要處理外，我們已基本完成。在處理那些之前，讓讓我們看一下成果。編譯整個解決方案—〉右鍵在瀏覽器中查看Default.aspx頁面：

右鍵查看頁面源碼，你可能看到如下內容（src="/WebResource.axd.."部分有刪減）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Parchment Purveyor
</title>
<script type="text/javascript">
window.onload = function () { GreetUser(); };
</script>
</head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="..." />
</div>

<script src="/WebResource.axd?d=fslk3GLsk3Slek&t=1234" type="text/javascript"></script>
<script src="/WebResource.axd?d=fglk3kSl3LS5&t=5678" type="text/javascript"></script>
<h1>Parchment Purveyor</h1>
<p>Paper for printers, painting, publication,
paper planes, and plenty of other plebeian projects!</p>
</form>
</body>
</html>

請注意引用“WebResource.axd”的兩個<script>標簽。它提供了讓客戶端訪問嵌入式信息的基本功能。注意，第一個<script>標簽注冊了ShowMessage(),第二個<script>標簽注冊了GreetUser()。在你的JS庫中調用Include_GreetUser()時，上面所有標簽都會被引入到頁面中。

后期引用

有時上面技術可能會引用JS文件失敗。例如當我使用第三方工具工作時，就可能在渲染階段阻止調用.NET代碼。當你在渲染階段引用那些函數時，腳本標簽不會被插入頁面。這是因為頁面一開始就已經呈現為HTML。對這個問題的解決方法是構造一個替換函數,并在HTML底部附近插入腳本標簽。我稱之為“后期引用”，為此，需要對JavaScriptHelper做一些修改：

using System;
using System.Web;
using System.Web.UI;

[assembly: WebResource("JavaScriptLibrary.JavaScript.ShowMessage.js", "application/x-javascript")]
[assembly: WebResource("JavaScriptLibrary.JavaScript.GreetUser.js", "application/x-javascript")]

namespace JavaScriptLibrary {

/// <summary>
/// 幫助頁面引用嵌入式JS文件
/// </summary>
public class JavaScriptHelper {
#region Constants
private const string TEMPLATE_SCRIPT = "<script type=\"text/javascript\" src=\"{0}\"></script>\r\n";
private const string NAME_SHOW_MESSAGE = "JavaScriptLibrary.JavaScript.ShowMessage.js";
private const string NAME_GREET_USER = "JavaScriptLibrary.JavaScript.GreetUser.js";
#endregion

#region 公共方法
/// <summary>
/// 頁面引用ShowMessage.js文件
/// </summary>
/// <param name="manager">通過Page.ClientScript訪問</param>
/// <param name="late">是否在HTML底部引用JS</param>
public static void Include_ShowMessage(ClientScriptManager manager, bool late = false) {
IncludeJavaScript(manager, NAME_SHOW_MESSAGE, late);
}
/// <summary>
/// 頁面引用GreetUser.js文件(包括所有依賴文件)
/// </summary>
/// <param name="manager">通過Page.ClientScript訪問</param>
/// <param name="late">是否在HTML底部引用JS</param>
public static void Include_GreetUser(ClientScriptManager manager, bool late = false) {
// 依賴 (ShowMessage.js).
Include_ShowMessage(manager, late);
// 引用 GreetUser.js.
IncludeJavaScript(manager, NAME_GREET_USER, late);
}
#endregion

#region 私有方法
/// <summary>
/// 頁面引用指定的嵌入式JS文件
/// </summary>
/// <param name="manager">通過Page.ClientScript訪問</param>
/// <param name="resourceName">標示嵌入式JS文件的名字</param>
/// <param name="late">是否在HTML底部引用JS</param>
private static void IncludeJavaScript(ClientScriptManager manager, string resourceName, bool late) {
var type = typeof(JavaScriptLibrary.JavaScriptHelper);
if (!manager.IsStartupScriptRegistered(type, resourceName)) {
if (late) {
var url = manager.GetWebResourceUrl(type, resourceName);
var scriptBlock = string.Format(TEMPLATE_SCRIPT, HttpUtility.HtmlEncode(url));
manager.RegisterStartupScript(type, resourceName, scriptBlock);
}
else {
manager.RegisterClientScriptResource(type, resourceName);
manager.RegisterStartupScript(type, resourceName, string.Empty);
}
}
}
#endregion
}
}

為每個方法添加一個參數late。該參數默認值為false,因此這些方法依舊可以按照原有方式調用。該參數為false表示原有行為不變，為true時將導致在HTML結尾部分引用腳本段。可能注意到，在late=false時，我仍然調用了RegisterStartupScript()，但傳入了一個空字符串(所以不會在HTML插入任何內容)。完成后IsStartupScriptRegistered()將會返回正確值。這樣，即使在late被置false后調用了其中的一個函數，又把late置為true,JS也不會被多次引用。如果要看效果，注釋掉后臺代碼OnPreRender()，并在頁面中做如下修改：

<body>
<form id="form1" runat="server">
<h1>Parchment Purveyor</h1>
<p>Paper for printers, painting, publication,
paper planes, and plenty of other plebeian projects!</p>
<% // This gets called during the render stage.
JavaScriptLibrary.JavaScriptHelper.Include_GreetUser(Page.ClientScript, true); %>
</form>
</body>

在運行程序時，如果觀察頁面源碼，你會發現這將調用HTML底部<script>標簽引用的函數。

外部JS

到目前為止，我只是演示了如何引用嵌入式JS。然而，有時候會需要聯接到外部JS文件。為此，需要在JavaScriptHelper添加一個新函數：

/// <summary>
/// 在頁面里引用指定的外部JavaScript文件
/// </summary>
/// <param name="page">當前頁面</param>
/// <param name="key">唯一標示外部JavaScript文件的名字</param>
/// <param name="httpUrl">外部JavaScript文件的URL地址</param>
/// <param name="httpsUrl">啟用SSL時外部JavaScript文件的URL地址</param>
/// <param name="late">是否需要在HTML下面引用JavaScript</param>
private static void IncludeExternalJavaScript(Page page, string key, string httpUrl, string httpsUrl, bool late) {
var manager = page.ClientScript;
var type = typeof(JavaScriptLibrary.JavaScriptHelper);
bool isStartupRegistered = manager.IsStartupScriptRegistered(type, key);
bool isScriptRegistered = manager.IsClientScriptIncludeRegistered(type, key);
if (!(isStartupRegistered || isScriptRegistered)) {
string url;
if (page.Request.Url.Scheme.ToLower() == "http") {
url = httpUrl;
}
else {
url = httpsUrl;
}
if (late) {
manager.RegisterStartupScript(type, key, string.Format(TEMPLATE_SCRIPT, HttpUtility.HtmlEncode(url)));
}
else {
manager.RegisterClientScriptInclude(type, key, url);
}
}
} 做為常用外部JS文件示例，我將使用微軟CDN上的JS文件。如其它JS文件一樣，首先在JavaScriptHelper 類中添加一個函數，供頁面調用jQuery:
private const string NAME_JQUERY = "jQuery";
private const string URL_JQUERY = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js";
private const string URL_JQUERY_HTTPS = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js";
/// <summary>
/// 頁面引用jQuery.js
/// </summary>
/// <param name="page">當前頁面.如果傳入為null,則使用HTTP上下文的當前</param>
/// <param name="late">是否需要在HTML下面引用JavaScript</param>
public static void Include_jQuery(Page page,bool late=false) {
if (page == null)
page = (Page)HttpContext.Current.Handler;
IncludeExternalJavaScript(page,NAME_JQUERY,URL_JQUERY,URL_JQUERY_HTTPS,late);
} 最后你能后在頁面里通過在OnPreRender()里調用添加的方法實現對jQuery的引用。
protected override void OnPreRender(EventArgs e) {
base.OnPreRender(e);
JavaScriptLibrary.JavaScriptHelper.Include_jQuery(Page);
JavaScriptLibrary.JavaScriptHelper.Include_GreetUser(Page.ClientScript);
} 運行程序，察看頁面源碼，你會看到如下jQuery引用：
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script>

添加新的JS文件

一旦所有內容完成部署，在需要添加新的JS文件時，只需要幾步即可完成，如下：

在JavaScript目錄中添加js文件。引用外部js文件跳過該步驟；
設置“生成操作”為“嵌入資源”。引用外部js文件跳過該步驟；
添加assembly屬性表示js文件為Web資源。引用外部js文件跳過該步驟；
在JavaScriptHelper類中添件一個引用JS文件的函數；
從頁面，控件或母版頁上調用你創建的函數；

不引用JS文件

以上所做都是為了引用JS文件，但也有時候你可能不需要引用JS文件。例如，在使用第三方控件庫時，它們可能通過其他方式引用了JS，這時唯一阻止某一JS文件被兩次引用的方法是通過你的代碼消除重復引用（由第三方庫幫你引用，不需要重復引用）。這可以通過在JavaScriptHelper增加額外的函數實現。在實現之前，先讓我們演示一下這些技術應用的場景。假設你的第三方控件InlineGreeting.ascx引用了jQuery，其內容大致如下：

<%@ Control Language="C#" %>

<%-- This is a bad way to do things, but we can luckily overcome this obstacle. --%>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lblGreeting").text("Hello");
});
</script>
<p>
<label id="lblGreeting"></label>
</p> 現在假設我們有另一個自己的控件Hello.ascx，使用了同樣的jQuery文件：
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Hello.ascx.cs" Inherits="ParchmentPurveyor.Hello" %>

<script type="text/javascript">
$(document).ready(GreetUser);
</script> Hello.ascx的后臺代碼引用了jQuery，如下：
protected override void OnPreRender(EventArgs e) {
base.OnPreRender(e);
JavaScriptLibrary.JavaScriptHelper.Include_GreetUser(Page.ClientScript);
JavaScriptLibrary.JavaScriptHelper.Include_jQuery(Page);
}
現在，如果在Default.aspx中引用上述用戶控件，jQuery將會被引用兩次（第三方一次，我們一次）。為避免此類情況發生，我們將在JavaScriptHelper類中添加兩個方法，ExcludeJavaScript()和Exclude_jQuery()：
private const string NAME_DUMMY_FILE = "JavaScriptLibrary.JavaScript.DummyFile.js";
/// <summary>
/// 該頁面排除jQuery.js
/// </summary>
/// <param name="manager">通過Page.ClientScript訪問</param>
public static void Exclude_jQuery(ClientScriptManager manager) {
ExcludeJavaScript(manager, NAME_JQUERY);
}
/// <summary>
/// 注冊一個虛假的腳本來阻止包含真實的JavaScript
/// </summary>
/// <param name="manager">通過Page.ClientScript訪問</param>
/// <param name="key">唯一標示JavaScript文件的名字</param>
private static void ExcludeJavaScript(ClientScriptManager manager, string key) {
var type = typeof(JavaScriptLibrary.JavaScriptHelper);
var url = manager.GetWebResourceUrl(type, NAME_DUMMY_FILE);
manager.RegisterStartupScript(type, key, string.Empty);
manager.RegisterClientScriptInclude(type, key, url);
}

注意,我們定義了一個新的常量NAME_DUMMY_FILE。上面函數假定我們按照上述步驟在JavaScript文件夾里添加了一個空JS文件，并嵌入了它。這個空虛擬JS文件可以引用在任何我們想不引用JS文件的地方。為阻止我們的庫引用jQuery只需要調用在Default.aspx頁面的Page_Load()中調用Exclude_jQuery()：

protected void Page_Load(object sender, EventArgs e) {
//我們通過第三方控件引用了jQuery,那么將避免再一次引用
JavaScriptLibrary.JavaScriptHelper.Exclude_jQuery(Page.ClientScript);
}

現在我們要做的是修改Default.aspx引用InlineHello.ascx和Hello.ascx，結果如下：

...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Parchment Purveyor</title>
<script type="text/javascript">
// window.onload = function () { GreetUser(); };
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Parchment Purveyor</h1>
<p>Paper for printers, painting, publication,
paper planes, and plenty of other plebeian projects!</p>
<% // 這在渲染階段調用
JavaScriptLibrary.JavaScriptHelper.Include_GreetUser(Page.ClientScript, true); %>
</div>
<%-- An inline greeting (pretend this comes from a third-party control library. --%>
<greet:InlineHello ID="InlineHello1" runat="server" />
<%-- Our jQuery greeting. --%>
<greet:Hello runat="server" />
</form>
</body>
</html>

現在我們已清楚在調用Include_jQuery()之前先調用Exclude_jQuery()，就能夠阻止我們的JS庫引用jQuery.js文件。這就是說jQuery只會被我們的第三方控件引用。大多數時候這種情況可以避免。然而，有時候不可避免，這時該技術也可以讓我們的HTML更加干凈整潔。

你都有哪些收獲?

經過這些工作，依舊有同樣的HTML輸出，你可能會問“通過添加這些額外的代碼，我獲得了什么？”。那么這里就列出幾點：

內聯JS：通過避免把JS直接內聯到頁面,減小了頁面尺寸。
發布JS：當你發布Web站點時，你不需要發布引用的JS文件，只發布DLL就足夠了。
錯誤引用：即使改變了程序路徑，你也不用為修改JS路徑擔憂。
依賴性：文件依賴自動管理。如果你引用了GreetUser.js文件，那么ShowMessage.js文件會自動被引用。
無效引用：除非你調用的函數引用了它，否則不會有JS加載到頁面。這將避免頁面上出現無用的JS（潛在的加快了頁面載入時間）。
HTTP/HTTPS：腳本標記的代碼輸出與協議無關，因此協議對所有頁面一樣。
重構：如果你想使用一個不同版本的腳本，你只需要在一個地方修改它。例如，如果你決定切換到CDN版本的jQuery，而不是你自己承載，這可能非常有用。更新一個新版本的jQuery時也非常有用。
冗余：不管你在方法中引用多少次，該腳本標簽僅會在頁面上本引用一次。

轉載于:https://www.cnblogs.com/niyw/archive/2011/06/02/2064937.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的高效管理ASP.NET的JavaScript库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ubuntu 下的ftp安装及root身
下一篇： .NET Framewrok 4.0新增