65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 中管理您的 JavaScript 库

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.88/5 (97投票s)

2011 年 5 月 16 日

CPOL

12分钟阅读

viewsIcon

440443

downloadIcon

4988

了解如何将 JavaScript 嵌入 DLL、管理依赖项并避免页面膨胀。

How To Manage JavaScript Poorly

引言

ASP.NET 开发者在管理 JavaScript 时通常会采取宽松的做法。我相信这是因为网上没有太多关于如何在 ASP.NET 应用程序中妥善处理 JavaScript 的可靠信息。本文旨在提出一种管理 ASP.NET 应用程序中 JavaScript 的最佳技术。将解决以下问题:

  • 内联 JS - 将 JavaScript 直接放在页面中导致页面膨胀
  • 部署 JS - 忘记部署 JavaScript 文件
  • 错误的引用 - 在另一个 Web 应用程序中使用时,指向 JavaScript 的链接无效
  • 依赖关系 - 需要记住 JavaScript 文件之间的依赖关系
  • 未使用的 JS - 在未使用 JavaScript 的页面上引用 JavaScript
  • HTTP / HTTPS - 从 HTTPS 页面引用 HTTP 上的 JavaScript
  • 重构 - 为新版本重构可能需要一些时间
  • 冗余 - 多次包含 JavaScript 文件

目录

必备组件

请确保您拥有 Visual Studio 2010。本文中介绍的一些概念可能不适用于 Express 版本。

概述

上述大多数问题都是由于将 JavaScript 或指向 JavaScript 文件的引用直接放在 ASPX 页面中引起的。几乎所有上述问题的解决方案是使用 ASP.NET 的内置功能将 JavaScript 文件嵌入到 DLL 中,然后动态引用这些文件。本文将介绍这些功能以及充分利用它们的一些技术。将使用教程格式来解释每个步骤的完成方式。

入门

首先。启动 Visual Studio 2010 并创建一个名为 `ParchmentPurveyor` 的新空 Web 应用程序(我们正在为一位想销售高档纸张的人创建一个网站)

New Empty Web Application (ParchmentPurveyor)

现在,添加一个名为“Default.aspx”的新 Web 窗体,并为其添加一些简单的 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>

添加 JavaScript

既然我们有了一个功能齐全的网站,肯定能吸引大量关注,我们可以专注于 JavaScript 编码。我们不会将 JavaScript 文件添加到主项目中,而是采取一种稍有不同的方式。我们将创建一个新项目来保存我们所有的 JavaScript 文件。首先添加一个名为 `JavaScriptLibrary` 的新类库项目到解决方案中

Add Class Library (JavaScriptLibrary)

当您添加该项目时,它会为您添加一个名为“Class1.cs”的文件。我们不需要它,所以将其删除。向 `JavaScriptLibrary` 添加一个名为“JavaScript”的文件夹。您还将在此文件夹中添加两个 JavaScript 文件。将它们命名为“ShowMessage.js”和“GreetUser.js”。接下来,创建一个名为 `JavaScriptHelper` 的新类(不要将其放在“JavaScript”文件夹中...它将放在 `JavaScriptLibrary` 项目的根级别)。此时,您的解决方案结构应该如下所示:

Solution Structure (2 Projects, 2 JS Files, 1 Code File, and 1 Webpage)

几个空的 JavaScript 文件对我们没有好处,所以让我们在其中添加一些内容。首先,“ShowMessage.js”将包含一个名为 `ShowMessage()` 的函数

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

GreetUser.js”文件将拥有自己的函数,名为 `GreetUser()`

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

请注意,`GreetUser()` 依赖于 `ShowMessage()`。我们稍后将处理这个问题。

嵌入 JavaScript 文件

我们希望将 JavaScript 文件嵌入到 DLL 中,而不是部署到我们的网站。这样,如果 DLL 被部署到网站,所有 JavaScript 文件也会被自动部署。这非常简单;我们只需要转到每个 JavaScript 文件的属性,然后将“构建操作”从“内容”更改为“嵌入的资源”

Set Build Action To Embedded Resource

虽然这可以确保文件被嵌入到 DLL 中,但您仍必须使它们可供 Web 客户端使用。在此之前,`JavaScriptLibrary` 项目需要引用 `System.Web`

Add Reference To System.Web

添加该引用后,编辑“JavaScriptHelper.cs”并添加以下 `using` 语句和程序集属性

using System.Web.UI;

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

这将使您的嵌入式 JavaScript 文件能够从客户端计算机访问。

包含嵌入的 JavaScript 文件

现在您已经嵌入了 JavaScript 文件并使其可以通过客户端计算机访问,您必须实际引用它们在使用的页面上。为了方便起见,我们将填充我们的 `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>
    /// Helps include embedded JavaScript files in pages.
    /// </summary>
    public class JavaScriptHelper
    {
        #region Constants

        private const string NAME_SHOW_MESSAGE = 
			"JavaScriptLibrary.JavaScript.ShowMessage.js";
        private const string NAME_GREET_USER = 
			"JavaScriptLibrary.JavaScript.GreetUser.js";

        #endregion

        #region Public Methods

        /// <summary>
        /// Includes ShowMessage.js in the page.
        /// </summary>
        /// <param name="manager">Accessible via Page.ClientScript.</param>
        public static void Include_ShowMessage(ClientScriptManager manager)
        {
            IncludeJavaScript(manager, NAME_SHOW_MESSAGE);
        }

        /// <summary>
        /// Includes GreetUser.js (and all dependencies) in the page.
        /// </summary>
        /// <param name="manager">Accessible via Page.ClientScript.</param>
        public static void Include_GreetUser(ClientScriptManager manager)
        {
            // Dependency (ShowMessage.js).
            Include_ShowMessage(manager);

            // Include GreetUser.js.
            IncludeJavaScript(manager, NAME_GREET_USER);
        }

        #endregion

        #region Private Methods

        /// <summary>
        /// Includes the specified embedded JavaScript file in the page.
        /// </summary>
        /// <param name="manager">Accessible via Page.ClientScript.</param>
        /// <param name="resourceName">The name used to identify the 
        /// embedded JavaScript file.
        /// </param>
        private static void IncludeJavaScript
		(ClientScriptManager manager, string resourceName)
        {
            var type = typeof(JavaScriptLibrary.JavaScriptHelper);
            manager.RegisterClientScriptResource(type, resourceName);
        }

        #endregion
    }
}

`IncludeJavaScript()` 函数是实现所有魔力的地方。它确保插入一个 `script` 标签来指向一个嵌入的 JavaScript 文件,它通过调用 `RegisterClientScriptResource()` 来实现。`IncludeJavaScript()` 由 `Include_GreetUser()` 调用。请注意,`Include_GreetUser()` 也调用 `Include_ShowMessage()`,这意味着它处理了类的用户的依赖关系。任何包含 `GreetUser()` 函数的页面也将包含 `ShowMessage()` 函数。

既然我们有了可供使用的类,让我们在“Default.aspx”页面上使用它。您可以先确保 `ParchmentPurveyor` 引用了 `JavaScriptLibrary`

Add Reference To JavaScriptLibrary

接下来,我们需要修改代码隐藏以在页面中包含 JavaScript。

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()` 函数。为此,我们只需将以下 JavaScript 添加到页面中(我选择将其添加到 `head` 标签中)

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

就是这样!您完成了!嗯,差不多。还有一些小问题需要处理。不过,在我们解决这些问题之前,让我们先看看我们的劳动成果

It Works!

这是您查看页面源代码时看到的 HTML 可能是什么样子(我已缩短并删除了一些值)

<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>

请注意,有两个 `script` 标签引用了名为“WebResource.axd”的内容。这基本上是一个为客户端提供嵌入信息的服务。您可以在此处阅读有关“WebResource.axd”的更多信息。需要注意的重要一点是,第一个 `script` 标签提供了 `ShowMessage()` 函数,第二个 `script` 标签提供了 `GreetUser()` 函数。当您在 JavaScript 库中调用 `Include_GreetUser()` 函数时,这两个 `script` 标签都被包含在页面中。

延迟加载

有时,上述技术不包含 JavaScript 文件。例如,我使用一个第三方工具,该工具不允许我在渲染阶段之前调用 .NET 代码。当您在渲染阶段调用上面的包含函数时,`script` 标签不会插入到页面中。这是因为页面的开头已经渲染为 HTML。我对此问题的解决方案是创建一个函数的备用形式,该函数在 HTML 的底部附近插入 `script` 标签。我称之为“延迟加载”。我们可以通过对 `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>
    /// Helps include embedded JavaScript files in pages.
    /// </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 Public Methods

        /// <summary>
        /// Includes ShowMessage.js in the page.
        /// </summary>
        /// <param name="manager">Accessible via Page.ClientScript.</param>
        /// <param name="late">Include the JavaScript at the bottom of the HTML?</param>
        public static void Include_ShowMessage
		(ClientScriptManager manager, bool late = false)
        {
            IncludeJavaScript(manager, NAME_SHOW_MESSAGE, late);
        }

        /// <summary>
        /// Includes GreetUser.js (and all dependencies) in the page.
        /// </summary>
        /// <param name="manager">Accessible via Page.ClientScript.</param>
        /// <param name="late">Include the JavaScript at the bottom of the HTML?</param>
        public static void Include_GreetUser
		(ClientScriptManager manager, bool late = false)
        {
            // Dependency (ShowMessage.js).
            Include_ShowMessage(manager, late);

            // Include GreetUser.js.
            IncludeJavaScript(manager, NAME_GREET_USER, late);
        }

        #endregion

        #region Private Methods

        /// <summary>
        /// Includes the specified embedded JavaScript file in the page.
        /// </summary>
        /// <param name="manager">Accessible via Page.ClientScript.</param>
        /// <param name="resourceName">The name used to identify the 
        /// embedded JavaScript file.
        /// </param>
        /// <param name="late">Include the JavaScript at the bottom of the HTML?</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 将导致 `script` 块包含在 HTML 的末尾附近。另请注意,在 `late` 为 false 的情况下,我仍然调用 `RegisterStartupScript()`,但传递了一个空的 string (因此该函数调用实际上不会在 HTML 中插入任何内容)。这样做是为了让 `IsStartupScriptRegistered()` 返回正确的值。这样,JavaScript 永远不会被包含多次,即使其中一个函数被调用时 `late` 设置为 false,然后再次调用时 `late` 设置为 true。如果您想看看效果,请注释掉代码隐藏中的 OnPreRender(),并将页面的 body 修改为如下所示:

<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` 标签的函数版本,当您运行应用程序并查看页面源代码时,您可以看到这一点。

外部 JavaScript

到目前为止,我只演示了如何包含嵌入的 JavaScript。但是,有时链接到外部 JavaScript 文件也是可取的。为了实现这一点,我们需要在 `JavaScriptHelper` 中添加一个新的辅助函数

/// <summary>
/// Includes the specified external JavaScript file in the page.
/// </summary>
/// <param name="page">The current page.</param>
/// <param name="key">The name used to uniquely identify the external JavaScript file.
/// </param>
/// <param name="httpUrl">The URL of the external JavaScript file.</param>
/// <param name="httpsUrl">The URL of the external JavaScript file when SSL is enabled.
/// </param>
/// <param name="late">Include the JavaScript at the bottom of the HTML?</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);
        }
    }
}

作为您可能包含的外部文件的示例,我将使用 Microsoft CDN 托管的 jQuery 文件。就像其他 JavaScript 文件一样,您将在 `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>
/// Includes jQuery.js in the page.
/// </summary>
/// <param name="page">The current page. Pass in null to get
/// the current page from the HTTP context.</param>
/// <param name="late">Include the JavaScript at the bottom of the HTML?</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>

添加新的 JavaScript 文件

设置好一切后,在添加新的 JavaScript 文件时,您只需要完成几个步骤

  • 将“*.js”文件添加到“JavaScript”文件夹。外部 JavaScript 文件请跳过此步骤。
  • 将“构建操作”设置为“嵌入的资源”。外部 JavaScript 文件请跳过此步骤。
  • 添加程序集属性以指示 JavaScript 文件是 Web 资源。外部 JavaScript 文件请跳过此步骤。
  • 在 `JavaScriptHelper` 中创建一个函数来包含您的 JavaScript 文件。
  • 从页面、控件或母版页调用您刚刚创建的函数。

排除 JavaScript 文件

虽然您应该拥有包含 JavaScript 所需的一切,但有时您必须排除 JavaScript。例如,在处理可能以特殊方式包含 JavaScript 的第三方控件库时,防止某个 JavaScript 文件被包含两次的唯一方法可能是让您的代码避免包含它(然后让第三方库为您包含 JavaScript)。这可以通过另一个辅助函数来实现。不过,在我们开始之前,让我们演示一种可以使用此技术的场景。假设您的第三方控件包含 jQuery。此用户控件“InlineGreeting.ascx”将充当这样的控件

<%@ 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 以及我们的 JavaScript 来问候用户

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    JavaScriptLibrary.JavaScriptHelper.Include_GreetUser(Page.ClientScript);
    JavaScriptLibrary.JavaScriptHelper.Include_jQuery(Page);
}

现在,如果我们将在“Default.aspx”页面上同时包含这两个用户控件,jQuery 将被包含两次(一次由第三方控件包含,一次由我们的 JavaScript 库包含)。为了避免这种情况,我们将向我们的 `JavaScriptHelper` 类添加两个函数:`ExcludeJavaScript()` 和 `Exclude_jQuery()`

private const string NAME_DUMMY_FILE = "JavaScriptLibrary.JavaScript.DummyFile.js";

/// <summary>
/// Excludes jQuery.js from the page.
/// </summary>
/// <param name="manager">Accessible via Page.ClientScript.</param>
public static void Exclude_jQuery(ClientScriptManager manager)
{
    ExcludeJavaScript(manager, NAME_JQUERY);
}

/// <summary>
/// Registers a dummy script to prevent the inclusion of the real JavaScript.
/// </summary>
/// <param name="manager">Accessible via Page.ClientScript.</param>
/// <param name="key">The name used to uniquely identify the JavaScript file.</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 文件添加到“JavaScript”文件夹中,并按照上述说明进行了嵌入。这个空的虚拟 JavaScript 文件将被包含,以替换我们想要排除的任何 JavaScript 文件。我们唯一需要做的就是通过从“Default.aspx”的 `Page_Load()` 中调用 `Exclude_jQuery()` 来防止我们的库包含 jQuery。

// Page load occurs before pre-render (the ideal place to exclude JavaScript).
protected void Page_Load(object sender, EventArgs e)
{
    // We have some third-party control that includes jQuery in a weird way,
    // so we will avoid including it again.
    JavaScriptLibrary.JavaScriptHelper.Exclude_jQuery(Page.ClientScript);
}

现在我们只需要修改“Default.aspx”以包含“InlineHello.ascx”和“Hello.ascx”,我们就完成了

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="ParchmentPurveyor.Default" %>
<%@ Register Src="~/Hello.ascx" TagPrefix="greet" TagName="Hello" %>
<%@ Register Src="~/InlineGreeting.ascx" TagPrefix="greet" TagName="InlineHello" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Parchment Purveyor</title>
    <script type="text/javascript">
        // We are commenting this out while we use the jQuery version.
        // window.onload = function () { GreetUser(); };
    </script>
</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>
        <%  // This gets called during the render stage.
            JavaScriptLibrary.JavaScriptHelper.Include_GreetUser
				(Page.ClientScript, true); %>
        <%-- An inline greeting (pretend this comes from a 
				third-party control library. --%>
        <greet:InlineHello runat="server" />
        <%-- Our jQuery greeting. --%>
        <greet:Hello runat="server" />
    </form>
</body>
</html>

既然我们已经确保在调用 `Include_jQuery()` 之前调用了 `Exclude_jQuery()`,我们就阻止了我们的 JavaScript 库包含“jQuery.js”。这样,jQuery 只被我们的模拟第三方控件包含一次。大多数情况下,这种情况应该可以避免。但是,对于不可避免的情况,此技术应该可以很好地整理我们的 HTML 输出。

VB.NET 用户须知

在制作 VB.NET 版本代码时,除语法差异外,几乎所有内容都与 C# 版本相同。但是,有一个重要的陷阱需要牢记。在 C# 版本代码中,您会注意到所有指向 JavaScript 文件的路径都以“JavaScriptLibrary.JavaScript.”开头。然而,在 VB.NET 版本代码中,所有路径都只以“JavaScriptLibrary.”开头(即,VB.NET 似乎忽略了所有 JavaScript 文件所在的“JavaScript”文件夹)。这要求 VB.NET 用户进行一些更改

<Assembly: WebResource("JavaScriptLibrary.ShowMessage.js", "application/x-javascript")>
<Assembly: WebResource("JavaScriptLibrary.GreetUser.js", "application/x-javascript")>
<Assembly: WebResource("JavaScriptLibrary.DummyFile.js", "application/x-javascript")>

Private Const NAME_SHOW_MESSAGE As String = "JavaScriptLibrary.ShowMessage.js"
Private Const NAME_GREET_USER As String = "JavaScriptLibrary.GreetUser.js"
Private Const NAME_DUMMY_FILE As String = "JavaScriptLibrary.DummyFile.js"

除此之外,我在让 VB.NET 代码正常工作时没有发现其他差异。如果您想自己尝试,可以通过文章顶部的链接下载 VB.NET 版本的代码。

您获得了什么?

在做了所有这些工作,但 HTML 输出看起来相同之后,您可能会问自己,“通过添加所有这些额外的代码,我到底获得了什么?”嗯,这里有一些这个方法提出的解决方案:

  • 内联 JS - 通过避免将 JavaScript 库内联到页面中,您减少了页面膨胀。
  • 部署 JS - 部署 Web 应用程序时,您无需包含“*.js”文件。部署 DLL 就足够了。
  • 错误的引用 - 即使您更改了应用程序的路径,也不必担心更改 JavaScript 路径。
  • 依赖关系 - 依赖关系自动管理。如果您包含“GreetUser.js”,则会自动包含“ShowMessage.js”。
  • 未使用的 JS - 除非您调用函数来包含 JavaScript,否则不会将其包含在页面中。这将避免在页面上出现未使用的 JavaScript(可能加快用户的加载速度)。
  • HTTP / HTTPS - 代码输出不包含协议的 `script` 标签,因此协议应与当前页面相同(即,HTTP 或 HTTPS)。
  • 重构 - 如果您想使用脚本的另一个版本,只需在一个地方修改它即可。例如,如果您决定改用 CDN 版本的 jQuery 而不是自己托管,这将非常有用。升级到新版本的 jQuery 也可能很有用。
  • 冗余 - 无论您调用包含函数多少次,`script` 标签都只会包含在页面中一次。

历史

  • 2014-09-21: 修复了拼写错误
  • 2011-11-10: 从 PRE 标签中删除了链接的 URL
  • 2011-05-29: 修复了 Code Project 文章编辑器弄乱的 PRE 标签中的 URL
  • 2011-05-25: 添加了 VB.NET 下载以及关于 VB.NET 版本的部分,并对 C# 下载进行了一些小的更改
  • 2011-05-23: 修复了目录中的锚点标题,并添加了关于排除 JavaScript的部分
  • 2011-05-21: 添加了目录
  • 2011-05-16: 添加了关于链接到外部 JavaScript 文件的信息,并添加了对 HtmlEncode 的调用
© . All rights reserved.