一个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">
    <div>
        <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>
    </div>
    </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

posted on 2009-05-13 11:44 Q.Lee.lulu 阅读(6020) 评论(26) 编辑收藏举报