高效管理ASP.NET的JavaScript庫

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:31:10

高效管理ASP.NET的JavaScript庫

高效管理ASP.NET的JavaScript庫:簡介對于ASP.NET開發(fā)人員來說,管理項(xiàng)目中的JavaScript都很隨意：我想這很大程度上可能是因?yàn)榫W(wǎng)上沒有如何妥善處理ASP.NET中JavaScript的可靠信息。此文的目的就是提供一種最佳方案，用于管理ASP.NET中的JavaScript。該方案將能解決以下問題：內(nèi)聯(lián)JS：

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀高效管理ASP.NET的JavaScript庫:簡介對于ASP.NET開發(fā)人員來說,管理項(xiàng)目中的JavaScript都很隨意：我想這很大程度上可能是因?yàn)榫W(wǎng)上沒有如何妥善處理ASP.NET中JavaScript的可靠信息。此文的目的就是提供一種最佳方案，用于管理ASP.NET中的JavaScript。該方案將能解決以下問題：內(nèi)聯(lián)JS：

簡介
對于ASP.NET開發(fā)人員來說,管理項(xiàng)目中的JavaScript都很隨意：

QQ圖片20161124133155.png

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

內(nèi)聯(lián)JS：把JS直接放在頁面中將導(dǎo)致頁面臃腫不堪。
發(fā)布JS：經(jīng)常忘記發(fā)布JS文件。
錯(cuò)誤引用：在其它Web程序中引用JS時(shí)經(jīng)常失敗。
依賴性：需要記住JS文件中錯(cuò)綜復(fù)雜的依賴關(guān)系。
無效引用：頁面上引用的JS從來沒有被用到。
HTTP/HTTPS：跨HTTPS頁面引用HTTP的JS。
重構(gòu)：重構(gòu)一個(gè)新版本將花費(fèi)大量時(shí)間。
冗余：多次引用統(tǒng)一個(gè)JS文件。
預(yù)備知識(shí)
確保已安裝Visual Studio 2010。Express版可能不支持此文涉及到的一些概念。

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

開始
第一步，啟動(dòng)Visual Studio 2010,并新建一個(gè)名為ParchmentPurveyor的空Web程序。

QQ圖片20161124133155.png

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ParchmentPurveyor.Default" %><html xmlns="http://www.w3.org/1999/xhtml"><headrunat="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
不同于在站點(diǎn)中添加JS文件，我們新建一個(gè)項(xiàng)目，用于包含我們所有的JS文件。在解決方案中添加一個(gè)新的類庫項(xiàng)目JavaScriptLibrary：

QQ圖片20161124133155.png

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

QQ圖片20161124133155.png

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

function ShowMessage(msg) { alert("Message From Website: " + msg);}
在GreetUser.js文件中添加如下代碼：

function GreetUser() { ShowMessage("Greetings and Salutations!");}
注意，GreetUser()依賴于ShowMessage()。

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

QQ圖片20161124133155.png

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

QQ圖片20161124133155.png

然后編輯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文件
現(xiàn)在你已嵌入了JS文件，并能通過客戶端電腦訪問它們。在使用的時(shí)候，你必須在頁面上引用它們。為此，需要對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 靜態(tài)字段 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> /// 在頁面上引用指定的嵌入式j(luò)s文件 /// </summary> /// <param name="manager">通過Page.ClientScript訪問</param> /// <param name="resourceName">用于標(biāo)示嵌入式JS文件的名字</param> private static void IncludeJavaScript(ClientScriptManager manager, string resourceName){ var type = typeof(JavaScriptLibrary.JavaScriptHelper); manager.RegisterClientScriptResource(type, resourceName); } #endregion }}
IncludeJavaScript()是關(guān)鍵所在。它通過調(diào)用RegisterClientScriptResource()確保為嵌入式JS文件獲取一個(gè)腳本標(biāo)簽。Include_GreetUser()調(diào)用了IncludeJavaScript()，同時(shí)也調(diào)用了Include_ShowMessage()（用于處理依賴關(guān)系）。因此，任何頁面在引用GreetUser()時(shí)也將引用ShowMessage()。

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

QQ圖片20161124133155.png