基于jQuery解析XML的插件

这个是前段时间写的,那时候还没了解js模版这一概念

等有时间再修改下,现在配置比较麻烦点

大体的目标就是获取返回的XML然后转换成html代码,这个不是很难的东西

但是因为后端开发人员对js不熟悉,而且很多页面需要返回不同的xml,所以为了图方便就简单的封装成个jQuery插件

废话不多说直接上代码。

这是示例XML的结构:

<root>
 	<script>
		<funcationname></funcationname>
		<funcationcode></funcationcode>
	</script>
 	<item>
		<title><![CDATA[ 标题 ]]></title>
		<link><![CDATA[ 链接 ]]></link>
		<pubDate><![CDATA[ 时间 ]]></pubDate>
	</item>
	<more>
		<title><![CDATA[ 标题 ]]></title>
		<link><![CDATA[ 链接 ]]></link>
	</more>
 </root>

下面是jQuery代码:

/**
 *	jQuery插件
 *	Author:	purecolor@foxmail.com
 *	Date  :	2011-02-16
 *	Params: dom:XMLDocument ,
 *			_default:{
 *				reg:匹配标签正则,
 *				lc:标签左结束符,
 *				rc:标签右结束符,
 *				script:是否包含script,
 *				scriptID:包含script的节点,
 *				tplBox:模板,
 *				tplhtml:信息条目
 *			}
 *	Return: HTMLDocument
 *  Note  : XML处理插件
 *		     
 */
(function($){
	$.fn.extend({
		parseXML:function(dom,option){
			var that=$(dom);
			var html={};
			var tpl='';
 
			//配置数据
			var _default={
				reg:/\{\w+\}/gi,
				lc:'{',
				rc:'}',
				script:true,
				scriptID:'script',
				tplBox:'<ul class="indexiframelist skin3">{item}</ul>{more}',
				tplhtml:{
					item:'<li><a href="{link}"><span class="timer">{pubDate}</span>{title}</a></li>',
					more:'<div class="moreLink"><a href="{link}">{title}</a></div>',
					script:'function {funcationname}{{funcationcode}}'
				}
			}		
			var option=$.extend(_default,option);
 
			//开始处理tplBody
			$.each(option.tplhtml,function(o,str){
				var rego=str.match(option.reg);
				html[o]=[];
				$(o,that).each(function(){
					var D=$(this),shtml=str;
					$.each(rego,function(i,c){
						shtml=shtml.replace(c,D.find(c.replace(option.lc,'').replace(option.rc,'')).text());
					});	
					html[o].push(shtml);
				});
			});	
 
			//开始处理tplBox
			var tplHtml=option.tplBox;
			tpl=option.tplBox.match(option.reg);
			$.each(tpl,function(i,c){
				tplHtml=tplHtml.replace(c,html[c.replace(option.lc,'').replace(option.rc,'')].join(''));
			});	
 
			//向页面添加script
			if(option.script){			
				var script=document.createElement('script');
				script.type="text/javascript";
				script.text=html[option.scriptID].join('');
				$('html > head').append(script);
			}	
 
			return tplHtml;
		}
	});
})(jQuery);

posted @ 2011-07-19 08:15  Q上的路人甲  阅读(946)  评论(0编辑  收藏  举报