jQuery插件管理方案

拼吾爱程序人生其他编程 javascript jQuery jQuery插件管理方案

1 / 1 页

跳转页

查看:284

striver

个人空间 相册
性别:
来自:拼吾爱
积分:7097
帖子:7009
注册: 2007-04-09

2008-10-09 00:17 | 只看楼主

树型| 收藏| 小中大复制帖子链接到剪贴板1F

jQuery插件管理方案

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

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

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

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

Code

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

一.定义jQuery资源配置文件

以下为我定义的基本格式

Code

[copy to clipboard]

CODE:

<?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的文件依赖缓存在服务器端缓存起来，然后进行解析.我这里代码可能写的比较乱，并不完善.给大家一个参考吧.

Code

[copy to clipboard]

CODE:

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<string, string> scriptList = new Dictionary<string, string>();
Dictionary<string, string> styleList = new Dictionary<string, string>();

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<string, string> scriptList, Dictionary<string, string> 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);
}

}
}
}