基于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);