jQuery插件管理方案

      jQuery发展趋势一片大好,这里向大家介绍一种管理jQuery插件的方案。可能有些人已经在系统中已经使用.

使用原因:在开发过程中,jQuery插件的使用越来越多,且jQuery的某些插件是基于某些插件来使用了,且有先后顺序的问题.

最初的做法:直接在页面上加载js.如下代码,其中使用了一些插件,其依赖于jQuery.

其中用了一个jdMenu插件,其依赖于四个文件(jdMenu.css,jquery.js,bgiframe.min.js,positionBy.js)

 


<link href="/App_Scripts/jPlugin/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" />
<script src="/App_Scripts/jquery.js" type="text/javascript"></script>
<script src="/App_Scripts/jPlugin/jquery-bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="/App_Scripts/jPlugin/jdMenu/jquery.positionBy.js" type="text/javascript"></script>
<script src="/App_Scripts/jPlugin/jdMenu/jquery.jdMenu.js" type="text/javascript"></script>
<script src="/App_Scripts/jPlugin/jquery-hint/hint.jquery.js" type="text/javascript"></script>
<script src="/App_Scripts/jPlugin/utilities/customExt.js" type="text/javascript"></script>
<script src="/App_Scripts/jPlugin/cookie/cookie.pack.js" type="text/javascript"></script><title>

 

上面用到的插件还不算多,在某些页面,我们曾经同时用到很多插件,如jQuery的Tab,autoComplete,validate及相关其他插件,这样插件相关的文件就很多很多了,随着开发的进行,越难越管理,而且jQuery也在不断的升级,不同的插件还会出现版本的问题.随着这些问题的出现,急需一个配置文件来配置管理.

 

一.定义jQuery资源配置文件

以下为我定义的基本格式

 


<?xml version="1.0" encoding="utf-8"?>
<Resources>
    
<Common>
      
<Plugins>
        
<Plugin Name="cookie" Src="~/App_Scripts/jPlugin/cookie/cookie.pack.js">
          
<Styles>
          
</Styles>
          
<Scripts>
            
<Script Key="jquery" Src="~/App_Scripts/jquery.js" />
          
</Scripts>
        
</Plugin>
        
<Plugin Name="treeview" Src="~/App_Scripts/jPlugin/jquery-treeview/jquery.treeview.pack.js">
          
<Styles>
            
<Style Key="jquery_treeview_css" Href="~/App_Scripts/jPlugin/jquery-treeview/jquery.treeview.css" />
          
</Styles>
          
<Scripts>
            
<Script Key="jquery" Src="~/App_Scripts/jquery.js" />
          
</Scripts>
        
</Plugin>
        
<Plugin Name="autocomplete" Src="~/App_Scripts/jPlugin/jquery-autocomplete/jquery.autocomplete-bundle.pack.js">
          
<Styles>
            
<Style Key="autocomplete_css" Href="~/App_Scripts/jPlugin/jquery-autocomplete/jquery.autocomplete.css" />
          
</Styles>
          
<Scripts>
            
<Script Key="jquery" Src="~/App_Scripts/jquery.js" />
            
<Script Key="bgiframe" Src="~/App_Scripts/jPlugin/jquery-bgiframe/jquery.bgiframe.min.js" />
          
</Scripts>
        
</Plugin>
      
</Plugins>
    
</Common>
    
<Required>
        
<Scripts>
          
<Script Name="jdMenu"></Script>
            
<Script Name="hint"></Script>
            
<Script Name="jQueryCustomExt"></Script>
            
<Script Name="cookie"></Script>
        
</Scripts>
    
</Required>
    
<Pages>
        
<Page Src="~/Administration/EmployeeMgmt.aspx">
            
<Scripts>
                
<Script Name="jTemplates"></Script>
                
<Script Name="treeview"></Script>
                
<Script Name="scrollTo"></Script>
                
<Script Name="validate"></Script>
                
<Script Name="jQueryCustomExt"></Script>
                
<Script Name="autocomplete"></Script>
                
<Script Name="blockUI"></Script>
            
</Scripts>
        
</Page>
        
<Page Src="~/ScheduleMgmt/Reschedule.aspx">
            
<Scripts>
                
<Script Name="My97DatePicker"></Script>
                
<Script Name="jQueryCustomExt"></Script>
                
<Script Name="draggable_1.0"></Script>
                
<Script Name="jTemplates"></Script>
                
<Script Name="tab_1.0"></Script>
                
<Script Name="autocomplete"></Script>
                
<Script Name="spinBtn"></Script>
                
<Script Name="hotkeys"></Script>
                
<Script Name="datepicker"></Script>
                
<Script Name="clockpick"></Script>
                
<Script Name="validate"></Script>
                
<Script Name="blockUI"></Script>
                
<Script Name="tooltip"></Script>
                
<Script Name="contextmenu"></Script>
                
<Script Name="hint"></Script>
                
<Script Name="jqueryMultiSelect"></Script>
                
<Script Name="timePicker"></Script>
            
</Scripts>
        
</Page>
    
</Pages>
</Resources>

 

1.Plugins节点表示每个不同的jQuery插件,Styles和Scripts节点是css文件和js文件集合,即这个jQuery插件的依赖文件.每个文件都有一个key,为了保证文件不重复加载.

2.再看Required节点,Required其实全局js加载,如每张页面都需要菜单,则需要jdMenu插件.这个可以根据需求来调整.

3.Pages节点.

这个节点集合是配置每个具体页面需要用到的插件.

以上三点为基本点,当然每个系统还有其他要注意的,比如有些页面的功能需要有权限的人才能使用,那如果没有权限的人员进入,则与此功能相关的插件则无需加载.具体可以根据需求不同进行扩展.

二.解析资源文件

以上文件可以利用asp.net 2.0的文件依赖缓存在服务器端缓存起来,然后进行解析.我这里代码可能写的比较乱,并不完善.给大家一个参考吧.

 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Xml;
using System.Web;
using System.Web.Caching;

namespace Luna.Common
{
   
public class SiteConfig
    
{
        
public static XmlDocument GetResourceXml()
        
{
            XmlDocument doc 
= new XmlDocument();
            ContentCache contentCache 
= ContentCache.Instantiate();



            
if (contentCache["ResourceMulit"!= null)
            
{
                doc 
= (XmlDocument)contentCache["ResourceMulit"];
            }

            
else
            
{
                
string file = HttpContext.Current.Server.MapPath("/App_Data/ResourceMulit.xml");
                doc.Load(file);
                CacheDependency dep 
= new CacheDependency(file, DateTime.Now);
                contentCache.Insert(
"ResourceMulit", doc, dep);
            }

            
return doc;
        }


        
public static void RegsiterResource()
        
{
            XmlDocument doc 
= SiteConfig.GetResourceXml();

            XmlNode firstNode 
= doc.DocumentElement.FirstChild;
            XmlNodeList RequiredScripts 
= firstNode.FirstChild.ChildNodes;
            XmlNodeList RequiredStyles 
= firstNode.ChildNodes[1].ChildNodes;

            Page currentPage 
= (Page)HttpContext.Current.Handler;
            RegisterResource(RequiredScripts, RequiredStyles);

            XmlNode secondNode 
= doc.DocumentElement.ChildNodes[1];
            
foreach (XmlNode item in secondNode.ChildNodes)
            
{
                
                
string pageSrc = item.Attributes["Src"].Value.ToLower();
                
if (currentPage.ResolveUrl(pageSrc) == HttpContext.Current.Request.Path.ToLower())
                
{
                    RegisterResource(item.FirstChild.ChildNodes, item.ChildNodes[
1].ChildNodes);
                }

            }

        }



        
public static void RegsiterResourceKey(XmlNode node, List<string> resourceNode, List<string> removeNode)
        
{
            
if (node != null)
            
{
                XmlNode scriptsNodes 
= node.SelectSingleNode("descendant::Scripts");

                
foreach (XmlNode scriptNode in scriptsNodes.ChildNodes)
                
{
                    
if (scriptNode.Attributes["Removed"== null)
                    
{
                        resourceNode.Add(scriptNode.Attributes[
"Name"].Value);
                    }

                    
else
                    
{
                        removeNode.Add(scriptNode.Attributes[
"Name"].Value);
                    }


                }

            }

        }


        
public static void RegsiterCommon()
        
{
            XmlDocument doc 
= SiteConfig.GetResourceXml();


            
//XmlNodeList RequiredStyles = firstNode.ChildNodes[1].ChildNodes;
            List<Plugin> PluginList = RegsiterCommonResource(doc);

            
//RegisterResource(RequiredScripts, RequiredStyles);
            
//Pages


            XmlNode currentPageNode 
= GetCurrentPageNode(doc);
            XmlNode RequireNode 
= GetRequireNode(doc);
            Dictionary
<stringstring> scriptList = new Dictionary<stringstring>();
            Dictionary
<stringstring> styleList = new Dictionary<stringstring>();

            List
<string> removeNode = new List<string>();
            List
<string> resourceNode = new List<string>();
            
if (currentPageNode != null)
            
{
                XmlAttribute isAuthenticated 
= currentPageNode.Attributes["IsAuthenticated"];
                
if (isAuthenticated != null)
                
{

                    
if (Convert.ToBoolean(isAuthenticated.Value) && HttpContext.Current.Request.IsAuthenticated)
                    
{
                        RegsiterResourceKey(currentPageNode, resourceNode, removeNode);
                    }

                }

                
else
                
{
                    RegsiterResourceKey(currentPageNode, resourceNode, removeNode);
                }

            }

           

            RegsiterResourceKey(RequireNode, resourceNode, removeNode);

           List
<string> filterResourceNode= resourceNode.FindAll(delegate(string node)
            
{
                
foreach (var item in removeNode)
                
{
                    
return node != item;
                }

                
return true;
            }
);
           
foreach (var item in filterResourceNode)
            
{
                Plugin plugin 
= GetCurrentPlugin(item, PluginList);

                RegisterPlugin(scriptList, styleList, plugin);
            }

        }


        
public static void RegisterPlugin(Dictionary<stringstring> scriptList, Dictionary<stringstring> styleList, Plugin plugin)
        
{
            Page currentPage 
= (Page)HttpContext.Current.Handler;
            
foreach (Style style in plugin.Styles)
            
{
                
if (!styleList.ContainsKey(style.Key))
                
{
                    styleList.Add(style.Key, style.Href);
                    currentPage.AddCss(style.Href);
                }

            }

            
foreach (Script script in plugin.Scripts)
            
{
                
if (!scriptList.ContainsKey(script.Key))
                
{
                    scriptList.Add(script.Key, script.Src);
                    currentPage.AddScript(script.Src);
                }

            }

            
if (!scriptList.ContainsKey(plugin.Name))
            
{
                scriptList.Add(plugin.Name, plugin.Src);
                currentPage.AddScript(plugin.Src);
            }

        }


        
public static Plugin GetCurrentPlugin(string scriptNode, List<Plugin> PluginList)
        
{

            
foreach (Plugin plugin in PluginList)
            
{
                
if (scriptNode == plugin.Name)
                
{
                    
return plugin;
                }

            }

            
return PluginList[0];
        }


        
private static XmlNode GetRequireNode(XmlDocument doc)
        
{
            XmlNode node 
= doc.DocumentElement.SelectSingleNode("descendant::Required");
            
return node;
        }


        
public static XmlNode GetCurrentPageNode(XmlDocument doc)
        
{

            Page currentPage 
= (Page)HttpContext.Current.Handler;
            XmlNode node 
= doc.DocumentElement.SelectSingleNode("descendant::Pages");
            
foreach (XmlNode item in node.ChildNodes)
            
{

                
string pageSrc = item.Attributes["Src"].Value.ToLower();
                
if (currentPage.ResolveUrl(pageSrc) == HttpContext.Current.Request.Path.ToLower())
                
{
                    
return item;
                }

            }

            
return null;
        }


        
public static List<Plugin> RegsiterCommonResource(XmlDocument doc)
        
{
            XmlNode firstNode 
= doc.DocumentElement.SelectSingleNode("descendant::Common");
            XmlNodeList PluginNodeList 
= firstNode.SelectSingleNode("descendant::Plugins").ChildNodes;

            Page currentPage 
= (Page)HttpContext.Current.Handler;
            List
<Plugin> plugins = new List<Plugin>();
            
foreach (XmlNode item in PluginNodeList)
            
{
                Plugin plugin 
= new Plugin();
                plugin.Name 
= item.Attributes["Name"].Value;
                plugin.Src 
= currentPage.ResolveUrl(item.Attributes["Src"].Value);
                
                XmlNodeList scripts 
= item.SelectSingleNode("descendant::Scripts").ChildNodes;
                
foreach (XmlNode script in scripts)
                
{
                    
string key = script.Attributes["Key"].Value;
                    
string src = currentPage.ResolveUrl(script.Attributes["Src"].Value);
                    
bool removed = false;
                    
if (script.Attributes["Removed"!= null)
                    
{
                        removed 
= Convert.ToBoolean(script.Attributes["Removed"].Value);
                    }

                    plugin.Scripts.Add(
new Script(key, src,false));
                }

                XmlNode styles 
= item.SelectSingleNode("descendant::Styles");
                
                
if (styles != null)
                
{
                    
foreach (XmlNode style in styles.ChildNodes)
                    
{
                        plugin.Styles.Add(
new Style(style.Attributes["Key"].Value,currentPage.ResolveUrl(style.Attributes["Href"].Value)));
                    }

                }

                plugins.Add(plugin);
            }

            
return plugins;
        }


        
private static void RegisterScript(string aa)
        
{
            
//foreach (XmlNode item in scriptsNode)
            
//{
            
//    string key = item.Attributes["Name"].Value;

            
//    RegisterScript(key);
            
//}
        }


        
private static void RegisterResource(XmlNodeList scripts, XmlNodeList styles)
        
{
            Page currentPage 
= (Page)HttpContext.Current.Handler;
            
foreach (XmlNode item in styles)
            
{
                
string href = currentPage.ResolveUrl(item.Attributes["Href"].Value);
                LiteralControl control 
= new LiteralControl(string.Format("\n<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />", href));
                currentPage.Header.Controls.Add(control);
            }

            
foreach (XmlNode item in scripts)
            
{
                
string key = item.Attributes["Key"].Value;
                
string src = currentPage.ResolveUrl(item.Attributes["Src"].Value);
                currentPage.AddScript(src);
                
//currentPage.ClientScript.RegisterClientScriptInclude(currentPage.GetType(), key, src);
            }


        }

    }

}

 

三.定义一个基类Page,与实际页面进行匹配

 


        protected override void OnLoad(EventArgs e)
        {
            SiteConfig.RegsiterCommon();
        }

 

好了,基本思路就是如此.大家有更好方案可以拿出来讨论下哈.

posted @ 2008-10-10 23:48  么么茶.NET  阅读(507)  评论(0编辑  收藏  举报