博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
我的Js模版引擎(三)
阅读量:5775 次
发布时间:2019-06-18

本文共 3283 字,大约阅读时间需要 10 分钟。

昨晚写的那个js模版引擎有不少bug,比如有些分隔符不支持,ie下有bug,并且还用了遭不少人唾弃的with,今晚又进行了一下改善,提高了分隔符的自由度,避开了with的使用,

修复了在ie下的bug(这个主要是由转义字符引起的bug,IE7下任然错误^_^),好了不多说了,直接看demo吧!

<div>hust_小C的模版引擎 <h2>对象遍历</h2> {
{ for(var i in data.a){ }} <li>{
{=i}}:{
{=data.a[i]}}</li> {
{ } }} <h2>If else 解析</h2> {
{if(data.b==100){}} b的值为:{
{=data.b}} {
{}else{ }} b的值不满足if条件 {
{ } }} <h2>表格解析</h2> <table style="background:red;color:#fff;" _mce_style="background: #990033;"> <tr>歌曲名</th><th>歌手</th><th>歌曲链接</th></tr> {
{ for(var i=0,l=data.song.length;i<l;i++){ }} <tr><td>{
{=data.song[i].songname}}</td><td>{
{=data.song[i].singer}}</td><td><a href="{
{=data.song[i].url}}" _mce_href="{
{=data.song[i].url}}">{
{=data.song[i].url}}</a></td></tr> {
{ } }} </table> <h2>图像解析</h2> {
{ for(var i=0,l=data.url.length;i<l;i++){ }} <img src="{
{=data.url[i]}}"> {
{ } }} </div>

模版解析核心代码

/** * @author hust_小C * email:hustcoolboy@gmail.com */var dom = {                    quote: function (str) {                        str = str.replace(/[\x00-\x1f\\]/g, function (chr) {                            var special = metaObject[chr];                            return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)                        });						return str.replace(/"/g, '\\"') ;                                         }                },                metaObject = {                    '\b': '\\b',                    '\t': '\\t',                    '\n': '\\n',                    '\f': '\\f',                    '\r': '\\r',                    '\\': '\\\\'                };//上边的dom来自司徒正美(function(w){    w.Template=Template||{};	function Template(options){	    return this instanceof arguments.callee?this.init(options):new arguments.callee(options);	}	Template.prototype={		init:function(options){			this.tpl=options.tpl;//待解析的模版			this.target=options.target||options.tpl;//解析后渲染的模板dom		    this.tplcontent=dom.quote(options.tpl.text||options.tpl.value);		    this.left=options.left||"{
{";//左分隔符 this.right=options.rigth||"}}";//右分隔符 this.namespace=options.namespace||"data";//编译生成的函数,里边所用变量的环境,即模版中所用变量的执行环境 this.body=[]; this.compiled="";//编译生成的函数 this.data=options.data; }, parse:function(){ var self=this; this.tplcontent.split(new RegExp('(?='+this.left+')|('+this.right+')')).filter(function(k,v){ return !(new RegExp(self.right)).test(v); }).each( function(k,v){ if((new RegExp('^'+self.left)).test(v)){ if(new RegExp('^'+self.left+'\s*=').test(v)){ self.body.push(v.replace(new RegExp('^'+self.left+'\s*=(.*)'),'\ttemp.push($1);\n').replace(/\\n/g,'')); }else{ self.body.push(v.replace(new RegExp('^'+self.left+'\s*(.*)'),'$1\n').replace(/\\n/g,'')); } } else {self.body.push('\ttemp.push(\"'+v.replace(/[\n\t]/g,'')+'\");\n');} }) return this.body.join(""); }, compile:function(){ if(!this.compiled){ this.compiled=new Function(this.namespace,'var temp=[];\n'+this.parse()+'\n return temp.join("");'); } return this.compiled; }, render:function(){ this.target.innerHTML=this.compile()(this.data); } }})(this); Array.prototype.filter=function(fn){ var temp=[]; for(var i=0,l=this.length;i

转载于:https://www.cnblogs.com/hust/archive/2011/04/26/2029740.html

你可能感兴趣的文章
统一日志平台-搭建
查看>>
SUSE11SP2批量安装脚本
查看>>
win上传Linux文件乱码问题解决办法
查看>>
docker简介和基础命令
查看>>
NFS安装配置
查看>>
python学习系列--深拷贝和浅拷贝
查看>>
“镜像扫描+基于策略的镜像提升”,打造安全的 Kubernetes 供应链!
查看>>
Win8 Metro(C#)数字图像处理--2.41彩色图像密度分割算法
查看>>
Project 2007下的关键路径计算设置
查看>>
华为DHCP global
查看>>
MySQL性能优化的21个最佳实践
查看>>
Oracle学习1--阿里云ECS上部署单实例数据库11.2.0.4
查看>>
svnserve:error while loading shared libraries:/usr/local/lib/libsvn_fs-1.so.0:cannot restore
查看>>
Amoeba-mysql主从+读写分离实战+测试+排错
查看>>
数据库日志系统分解
查看>>
阿里云获得国内首个SAP NetWeaver 公共云平台认证
查看>>
liunx下设置网卡为混杂模式的命令
查看>>
XML语法
查看>>
heartbeat 裂脑的概念及原理
查看>>
H3C无线控制器portal支持https重定向的经验汇总
查看>>