jQuery发展趋势一片大好,这里向大家介绍一种管理jQuery插件的方案。可能有些人已经在系统中已经使用.
使用原因:在开发过程中,jQuery插件的使用越来越多,且jQuery的某些插件是基于某些插件来使用了,且有先后顺序的问题.
最初的做法:直接在页面上加载js.如下代码,其中使用了一些插件,其依赖于jQuery.
其中用了一个jdMenu插件,其依赖于四个文件(jdMenu.css,jquery.js,bgiframe.min.js,positionBy.js)
![](/assets/blank.gif)
Code<linkhref="/App_Scripts/jPlugin/jdMenu/jquery.jdMenu.css"rel="stylesheet"type="text/css"/><scriptsrc="/App_Scripts/jquery.js"type="text/javascript"></script><scriptsrc="/App_Scripts/jPlugin/jquery-bgiframe/jquery.bgiframe.min.js"type="text/javascript"></script><scriptsrc="/App_Scripts/jPlugin/jdMenu/jquery.positionBy.js"type="text/javascript"></script><scriptsrc="/App_Scripts/jPlugin/jdMenu/jquery.jdMenu.js"type="text/javascript"></script><scriptsrc="/App_Scripts/jPlugin/jquery-hint/hint.jquery.js"type="text/javascript"></script><scriptsrc="/App_Scripts/jPlugin/utilities/customExt.js"type="text/javascript"></script><scriptsrc="/App_Scripts/jPlugin/cookie/cookie.pack.js"type="text/javascript"></script><title>
上面用到的插件还不算多,在某些页面,我们曾经同时用到很多插件,如jQuery的Tab,autoComplete,validate及相关其他插件,这样插件相关的文件就很多很多了,随着开发的进行,越难越管理,而且jQuery也在不断的升级,不同的插件还会出现版本的问题.随着这些问题的出现,急需一个配置文件来配置管理.
一.定义jQuery资源配置文件
以下为我定义的基本格式
![](/assets/blank.gif)
Code<?xml version="1.0" encoding="utf-8"?><Resources><Common><Plugins><PluginName="cookie"Src="~/App_Scripts/jPlugin/cookie/cookie.pack.js"><Styles></Styles><Scripts><ScriptKey="jquery"Src="~/App_Scripts/jquery.js"/></Scripts></Plugin><PluginName="treeview"Src="~/App_Scripts/jPlugin/jquery-treeview/jquery.treeview.pack.js"><Styles><StyleKey="jquery_treeview_css"Href="~/App_Scripts/jPlugin/jquery-treeview/jquery.treeview.css"/></Styles><Scripts><ScriptKey="jquery"Src="~/App_Scripts/jquery.js"/></Scripts></Plugin><PluginName="autocomplete"Src="~/App_Scripts/jPlugin/jquery-autocomplete/jquery.autocomplete-bundle.pack.js"><Styles><StyleKey="autocomplete_css"Href="~/App_Scripts/jPlugin/jquery-autocomplete/jquery.autocomplete.css"/></Styles><Scripts><ScriptKey="jquery"Src="~/App_Scripts/jquery.js"/><ScriptKey="bgiframe"Src="~/App_Scripts/jPlugin/jquery-bgiframe/jquery.bgiframe.min.js"/></Scripts></Plugin></Plugins></Common><Required><Scripts><ScriptName="jdMenu"></Script><ScriptName="hint"></Script><ScriptName="jQueryCustomExt"></Script><ScriptName="cookie"></Script></Scripts></Required><Pages><PageSrc="~/Administration/EmployeeMgmt.aspx"><Scripts><ScriptName="jTemplates"></Script><ScriptName="treeview"></Script><ScriptName="scrollTo"></Script><ScriptName="validate"></Script><ScriptName="jQueryCustomExt"></Script><ScriptName="autocomplete"></Script><ScriptName="blockUI"></Script></Scripts></Page><PageSrc="~/ScheduleMgmt/Reschedule.aspx"><Scripts><ScriptName="My97DatePicker"></Script><ScriptName="jQueryCustomExt"></Script><ScriptName="draggable_1.0"></Script><ScriptName="jTemplates"></Script><ScriptName="tab_1.0"></Script><ScriptName="autocomplete"></Script><ScriptName="spinBtn"></Script><ScriptName="hotkeys"></Script><ScriptName="datepicker"></Script><ScriptName="clockpick"></Script><ScriptName="validate"></Script><ScriptName="blockUI"></Script><ScriptName="tooltip"></Script><ScriptName="contextmenu"></Script><ScriptName="hint"></Script><ScriptName="jqueryMultiSelect"></Script><ScriptName="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的文件依赖缓存在服务器端缓存起来,然后进行解析.我这里代码可能写的比较乱,并不完善.给大家一个参考吧.
![](/assets/blank.gif)
Code
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Web.UI;
usingSystem.Xml;
usingSystem.Web;
usingSystem.Web.Caching;
![](/assets/blank.gif)
namespaceLuna.Common
![](/assets/blank.gif)
![](/assets/blank.gif)
{
publicclassSiteConfig
![](/assets/blank.gif)
![](/assets/blank.gif)
{
publicstaticXmlDocument GetResourceXml()
![](/assets/blank.gif)
![](/assets/blank.gif)
{
XmlDocument doc=newXmlDocument();
ContentCache contentCache=ContentCache.Instantiate();
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
if(contentCache["ResourceMulit"]!=null)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
doc=(XmlDocument)contentCache["ResourceMulit"];
}
else![](/assets/blank.gif)
![](/assets/blank.gif)
{
stringfile=HttpContext.Current.Server.MapPath("/App_Data/ResourceMulit.xml");
doc.Load(file);
CacheDependency dep=newCacheDependency(file, DateTime.Now);
contentCache.Insert("ResourceMulit", doc, dep);
}
returndoc;
}![](/assets/blank.gif)
publicstaticvoidRegsiterResource()
![](/assets/blank.gif)
![](/assets/blank.gif)
{
XmlDocument doc=SiteConfig.GetResourceXml();
![](/assets/blank.gif)
XmlNode firstNode=doc.DocumentElement.FirstChild;
XmlNodeList RequiredScripts=firstNode.FirstChild.ChildNodes;
XmlNodeList RequiredStyles=firstNode.ChildNodes[1].ChildNodes;
![](/assets/blank.gif)
Page currentPage=(Page)HttpContext.Current.Handler;
RegisterResource(RequiredScripts, RequiredStyles);
![](/assets/blank.gif)
XmlNode secondNode=doc.DocumentElement.ChildNodes[1];
foreach(XmlNode iteminsecondNode.ChildNodes)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
stringpageSrc=item.Attributes["Src"].Value.ToLower();
if(currentPage.ResolveUrl(pageSrc)==HttpContext.Current.Request.Path.ToLower())
![](/assets/blank.gif)
![](/assets/blank.gif)
{
RegisterResource(item.FirstChild.ChildNodes, item.ChildNodes[1].ChildNodes);
}
}
}![](/assets/blank.gif)
![](/assets/blank.gif)
publicstaticvoidRegsiterResourceKey(XmlNode node, List<string>resourceNode, List<string>removeNode)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
if(node!=null)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
XmlNode scriptsNodes=node.SelectSingleNode("descendant::Scripts");
![](/assets/blank.gif)
foreach(XmlNode scriptNodeinscriptsNodes.ChildNodes)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
if(scriptNode.Attributes["Removed"]==null)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
resourceNode.Add(scriptNode.Attributes["Name"].Value);
}
else![](/assets/blank.gif)
![](/assets/blank.gif)
{
removeNode.Add(scriptNode.Attributes["Name"].Value);
}![](/assets/blank.gif)
}
}
}![](/assets/blank.gif)
publicstaticvoidRegsiterCommon()
![](/assets/blank.gif)
![](/assets/blank.gif)
{
XmlDocument doc=SiteConfig.GetResourceXml();
![](/assets/blank.gif)
![](/assets/blank.gif)
//XmlNodeList RequiredStyles = firstNode.ChildNodes[1].ChildNodes;
List<Plugin>PluginList=RegsiterCommonResource(doc);
![](/assets/blank.gif)
//RegisterResource(RequiredScripts, RequiredStyles);
//Pages![](/assets/blank.gif)
![](/assets/blank.gif)
XmlNode currentPageNode=GetCurrentPageNode(doc);
XmlNode RequireNode=GetRequireNode(doc);
Dictionary<string,string>scriptList=newDictionary<string,string>();
Dictionary<string,string>styleList=newDictionary<string,string>();
![](/assets/blank.gif)
List<string>removeNode=newList<string>();
List<string>resourceNode=newList<string>();
if(currentPageNode!=null)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
XmlAttribute isAuthenticated=currentPageNode.Attributes["IsAuthenticated"];
if(isAuthenticated!=null)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
![](/assets/blank.gif)
if(Convert.ToBoolean(isAuthenticated.Value)&&HttpContext.Current.Request.IsAuthenticated)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
RegsiterResourceKey(currentPageNode, resourceNode, removeNode);
}
}
else![](/assets/blank.gif)
![](/assets/blank.gif)
{
RegsiterResourceKey(currentPageNode, resourceNode, removeNode);
}
}
![](/assets/blank.gif)
RegsiterResourceKey(RequireNode, resourceNode, removeNode);
![](/assets/blank.gif)
List<string>filterResourceNode=resourceNode.FindAll(delegate(stringnode)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
foreach(var iteminremoveNode)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
returnnode!=item;
}
returntrue;
});
foreach(var iteminfilterResourceNode)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
Plugin plugin=GetCurrentPlugin(item, PluginList);
![](/assets/blank.gif)
RegisterPlugin(scriptList, styleList, plugin);
}
}![](/assets/blank.gif)
publicstaticvoidRegisterPlugin(Dictionary<string,string>scriptList, Dictionary<string,string>styleList, Plugin plugin)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
Page currentPage=(Page)HttpContext.Current.Handler;
foreach(Style styleinplugin.Styles)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
if(!styleList.ContainsKey(style.Key))
![](/assets/blank.gif)
![](/assets/blank.gif)
{
styleList.Add(style.Key, style.Href);
currentPage.AddCss(style.Href);
}
}
foreach(Script scriptinplugin.Scripts)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
if(!scriptList.ContainsKey(script.Key))
![](/assets/blank.gif)
![](/assets/blank.gif)
{
scriptList.Add(script.Key, script.Src);
currentPage.AddScript(script.Src);
}
}
if(!scriptList.ContainsKey(plugin.Name))
![](/assets/blank.gif)
![](/assets/blank.gif)
{
scriptList.Add(plugin.Name, plugin.Src);
currentPage.AddScript(plugin.Src);
}
}![](/assets/blank.gif)
publicstaticPlugin GetCurrentPlugin(stringscriptNode, List<Plugin>PluginList)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
![](/assets/blank.gif)
foreach(Plugin plugininPluginList)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
if(scriptNode==plugin.Name)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
returnplugin;
}
}
returnPluginList[0];
}![](/assets/blank.gif)
privatestaticXmlNode GetRequireNode(XmlDocument doc)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
XmlNode node=doc.DocumentElement.SelectSingleNode("descendant::Required");
returnnode;
}![](/assets/blank.gif)
publicstaticXmlNode GetCurrentPageNode(XmlDocument doc)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
![](/assets/blank.gif)
Page currentPage=(Page)HttpContext.Current.Handler;
XmlNode node=doc.DocumentElement.SelectSingleNode("descendant::Pages");
foreach(XmlNode iteminnode.ChildNodes)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
![](/assets/blank.gif)
stringpageSrc=item.Attributes["Src"].Value.ToLower();
if(currentPage.ResolveUrl(pageSrc)==HttpContext.Current.Request.Path.ToLower())
![](/assets/blank.gif)
![](/assets/blank.gif)
{
returnitem;
}
}
returnnull;
}![](/assets/blank.gif)
publicstaticList<Plugin>RegsiterCommonResource(XmlDocument doc)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
XmlNode firstNode=doc.DocumentElement.SelectSingleNode("descendant::Common");
XmlNodeList PluginNodeList=firstNode.SelectSingleNode("descendant::Plugins").ChildNodes;
![](/assets/blank.gif)
Page currentPage=(Page)HttpContext.Current.Handler;
List<Plugin>plugins=newList<Plugin>();
foreach(XmlNode iteminPluginNodeList)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
Plugin plugin=newPlugin();
plugin.Name=item.Attributes["Name"].Value;
plugin.Src=currentPage.ResolveUrl(item.Attributes["Src"].Value);
XmlNodeList scripts=item.SelectSingleNode("descendant::Scripts").ChildNodes;
foreach(XmlNode scriptinscripts)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
stringkey=script.Attributes["Key"].Value;
stringsrc=currentPage.ResolveUrl(script.Attributes["Src"].Value);
boolremoved=false;
if(script.Attributes["Removed"]!=null)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
removed=Convert.ToBoolean(script.Attributes["Removed"].Value);
}
plugin.Scripts.Add(newScript(key, src,false));
}
XmlNode styles=item.SelectSingleNode("descendant::Styles");
if(styles!=null)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
foreach(XmlNode styleinstyles.ChildNodes)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
plugin.Styles.Add(newStyle(style.Attributes["Key"].Value,currentPage.ResolveUrl(style.Attributes["Href"].Value)));
}
}
plugins.Add(plugin);
}
returnplugins;
}![](/assets/blank.gif)
privatestaticvoidRegisterScript(stringaa)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
//foreach (XmlNode item in scriptsNode)
//{
//string key = item.Attributes["Name"].Value;
![](/assets/blank.gif)
//RegisterScript(key);
//}
}![](/assets/blank.gif)
privatestaticvoidRegisterResource(XmlNodeList scripts, XmlNodeList styles)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
Page currentPage=(Page)HttpContext.Current.Handler;
foreach(XmlNode iteminstyles)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
stringhref=currentPage.ResolveUrl(item.Attributes["Href"].Value);
![](/assets/blank.gif)
LiteralControl control=newLiteralControl(string.Format("\n<link href=\"
{0}\"rel=\"stylesheet\"type=\"text/css\"/>", href));
currentPage.Header.Controls.Add(control);
}
foreach(XmlNode iteminscripts)
![](/assets/blank.gif)
![](/assets/blank.gif)
{
stringkey=item.Attributes["Key"].Value;
stringsrc=currentPage.ResolveUrl(item.Attributes["Src"].Value);
currentPage.AddScript(src);
//currentPage.ClientScript.RegisterClientScriptInclude(currentPage.GetType(), key, src);
}![](/assets/blank.gif)
}
}
}
三.定义一个基类Page,与实际页面进行匹配
![](/assets/blank.gif)
CodeprotectedoverridevoidOnLoad(EventArgs e)
{
SiteConfig.RegsiterCommon();
}
好了,基本思路就是如此.大家有更好方案可以拿出来讨论下哈.
转载于:https://www.cnblogs.com/Clingingboy/archive/2008/10/08/jQueryPluginsManage.html