凌彦慧 发表于 2025-5-29 20:37:12

一个ASP.NET的JS管理方案

场景:在自定义控件、用户控件、页面、后台代码都会有引用JS的可能,这就会出现混乱或者重复引用的可能。
一个自定义控件,用于在ASPX页面中注册JS:
public class Script : Control
{
    #region 属性

    private string m_Src;
    /// <summary>
    /// 脚本文件路径
    /// </summary>
    public string Src
    {
      get { return m_Src; }
      set { m_Src = value; }
    }

    #endregion

    /// <summary>
    /// 在控件Init的时候将JS路径添加到HttpContext.Current.Items["IncludedJavaScript"]中。
    /// </summary>
    /// <param name="e"></param>
    protected override void OnInit(EventArgs e)
    {
      base.OnInit(e);
      if (!string.IsNullOrEmpty(Src))
      {
            string src = ResolveUrl(Src);
            List<string> includedJs = HttpContext.Current.Items["IncludedJavaScript"] as List<string>;
            if (null == includedJs)
            {
                includedJs = new List<string>();
                HttpContext.Current.Items["IncludedJavaScript"] = includedJs;
            }
            
            if (!includedJs.Contains(src))
            {
                includedJs.Add(src);
            }
            
      }
    }

一个静态类,用于管理JS和在后台代码(cs文件)中注册JS:
/// <summary>
/// Javascript管理器
/// </summary>
public static class JavaScriptManager
{
    /// <summary>
    /// 包含JS引用。
    /// </summary>
    /// <param name="filePaths"></param>
    public static void Include(params string[] filePaths)
    {
      HttpContext context = HttpContext.Current;
      if (null == context)
      {
            throw new Exception("HttpContext为空。");
      }

      System.Web.UI.Page p = context.CurrentHandler as System.Web.UI.Page;
      if (null == p)
      {
            throw new Exception("HttpContext.CurrentHandler不是Page。");
      }

      IList<string> jss = GetIncludedJavaScript();
      string resolveUrl;
      foreach (string filePath in filePaths)
      {
            resolveUrl=p.ResolveUrl(filePath);
            if (!jss.Contains(resolveUrl))
            {
                jss.Add(p.ResolveUrl(resolveUrl));
            }
      }
    }

    /// <summary>
    /// 获取已经包含的JS列表
    /// </summary>
    /// <returns></returns>
    public static IList<string> GetIncludedJavaScript()
    {
      HttpContext context = HttpContext.Current;
      if (null == context)
      {
            throw new Exception("HttpContext为空。");
      }

      IList<string> jss = HttpContext.Current.Items["IncludedJavaScript"] as IList<string>;
      if (null == jss)
      {
            jss = new List<string>();
            HttpContext.Current.Items["IncludedJavaScript"] = jss;
      }
      return jss;
    }
}
 
然后写一个基类页面,所有的页面都要继承自这个基类页:
public class BasePage : System.Web.UI.Page
{
    public BasePage() { }

    #region 注册/管理JS引用

    /// <summary>
    /// 将引用的JS添加到Page.Head中。
    /// </summary>
    private void InitJS()
    {
      IList<string> includedJs = JavaScriptManager.JavaScriptManager.GetIncludedJavaScript();

      foreach (string jsFilePath in includedJs)
      {
            var script = new HtmlGenericControl("script");
            script.Attributes["type"] = "text/javascript";
            script.Attributes["src"] = jsFilePath;
            Page.Header.Controls.Add(script);
      }
    }

    /// <summary>
    /// 在呈现之前注册JS
    /// </summary>
    /// <param name="e"></param>
    protected override void OnPreRender(EventArgs e)
    {
      base.OnPreRender(e);
      InitJS();
    }

    #endregion
}
上面是在OnPreRender中将JS注册到Page.Head中的,所以如果在自定义控件中注册JS引用,请在OnPreRender之前引用。
在ASPX页面中注册JS:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <lulu:Script runat="server" ID="Script1" Src="~/Test/aspx.js"></lulu:Script>
</head>
<body>
    <form id="form1" runat="server">
   
      <lulu:Script runat="server" ID="Script5" Src="~/Test/aspx.js"></lulu:Script>
      <lulu:Script runat="server" ID="Script6" Src="~/Test/aspx2.js"></lulu:Script>
      <lulu:Script runat="server" ID="Script7" Src="~/Test/aspx.js"></lulu:Script>
   
    </form>
</body>
</html>
 
在CS页面中注册JS:
public partial class _Default : BasePage
{
    protected void Page_Load(object sender, EventArgs e)
    {
      JavaScriptManager.JavaScriptManager.Include("~/JS/cs.js",
         "~/JS/cs.js",
         "~/JS/cs.js2",
         "~/JS/cs.js");
    }
}
最终生成的页面:

 
在这里是使用HttpContext.Current.Items来保存包含的JS列表。欢迎讨论、改进。
测试代码:JsManager.rar
作者:QLeelulu
出处:http://QLeelulu.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 一个ASP.NET的JS管理方案