四步让你学会打造自己的模版引擎

天界王者 发布于 2012/09/27 15:41
阅读 2K+
收藏 12

这里以Javascript为例,但思路可延伸到其它语言。

第一步:原始模版文件

<?
  var connotation = "error";
  var user={
	name:"OSC"
  };
  function addLink(k){
	return "http://www.oschina.net/?p="+k;
  }
  var is_print = true;
  var print2 = "very 2.";
?>
<div class="alert alert-${cn.global.connotation} alert-block">
<div class="alert alert-${connotation}">
	<button type="button" class="close" data-dismiss="alert">X</button>
	<h4>${connotation}!</h4>Best check yo self, ${user.name} you're not...
</div>

<?for(var k=1;k<10;k++){?>
<span id="id_${k}">${addLink(k)}</span>
<?}?>

<? if(is_print){?>
<b>${print2}</b>
<?}?>

<??> : 代码块起始和结束; ${} : 值内容输出

第二步:用正则表达式替换掉代码块,并生成占位符
@{code_block_0}
<div class="alert alert-${cn.global.connotation} alert-block">
<div class="alert alert-${connotation}">
	<button type="button" class="close" data-dismiss="alert">X</button>
	<h4>${connotation}!</h4>Best check yo self, ${user.name} you're not...
</div>
@{code_block_271}
<span id="id_${k}">${addLink(k)}</span>
@{code_block_331}
@{code_block_352}
<b>${print2}</b>
@{code_block_389}

第三步:把模版内容进行可执行的语言字符串连接,遇到占位符(正则判断)就把保存好的代码块内容填回来
cn.data="";
  var connotation = "error";
  var user={
	name:"OSC"
  };
  function addLink(k){
	return "http://www.oschina.net/?p="+k;
  }
  var is_print = true;
  var print2 = "very 2.";
cn.data+="<div class=\"alert alert-${cn.global.connotation} alert-block\">\n";
cn.data+="<div class=\"alert alert-${connotation}\">\n";
cn.data+="	<button type=\"button\" class=\"close\" data-dismiss=\"alert\">X</button>\n";
cn.data+="	<h4>${connotation}!</h4>Best check yo self, ${user.name} you're not...\n";
cn.data+="</div>\n";
for(var k=1;k<10;k++){
cn.data+="<span id=\"id_${k}\">${addLink(k)}</span>\n";
}
 if(is_print){
cn.data+="<b>${print2}</b>\n";
}

第四步: 用正则表达式拆装值表达式,最后就是完整的可执行脚本
cn.data="";
  var connotation = "error";
  var user={
	name:"OSC"
  };
  function addLink(k){
	return "http://www.oschina.net/?p="+k;
  }
  var is_print = true;
  var print2 = "very 2.";
cn.data+="<div class=\"alert alert-"+cn.global.connotation+" alert-block\">\n";
cn.data+="<div class=\"alert alert-"+connotation+"\">\n";
cn.data+="	<button type=\"button\" class=\"close\" data-dismiss=\"alert\">X</button>\n";
cn.data+="	<h4>"+connotation+"!</h4>Best check yo self, "+user.name+" you're not...\n";
cn.data+="</div>\n";
for(var k=1;k<10;k++){
cn.data+="<span id=\"id_"+k+"\">"+addLink(k)+"</span>\n";
}
 if(is_print){
cn.data+="<b>"+print2+"</b>\n";
}

把上面生成的内容交给可执行的语言环境去跑一下,最后输出内容如下
<div class="alert alert-info alert-block">
<div class="alert alert-error">
	<button type="button" class="close" data-dismiss="alert">X</button>
	<h4>error!</h4>Best check yo self, OSC you're not...
</div>
<span id="id_1">http://www.oschina.net/?p=1</span>
<span id="id_2">http://www.oschina.net/?p=2</span>
<span id="id_3">http://www.oschina.net/?p=3</span>
<span id="id_4">http://www.oschina.net/?p=4</span>
<span id="id_5">http://www.oschina.net/?p=5</span>
<span id="id_6">http://www.oschina.net/?p=6</span>
<span id="id_7">http://www.oschina.net/?p=7</span>
<span id="id_8">http://www.oschina.net/?p=8</span>
<span id="id_9">http://www.oschina.net/?p=9</span>
<b>very 2.</b>

核心的东西就是掌握正则表达式的替换就行了
加载中
0
Y-QTCe
Y-QTCe
没看懂。正则表达式在哪里?
天界王者
天界王者
没有写实现,就写了这种简单引擎的实现思路,替换+字符拼接,写实现太长,没人看,哈哈
0
Timor君
Timor君
原来写引擎好简单
天界王者
天界王者
这是最简单的引擎实现方式了,利用了本来的脚本语言,如果自己再实现些特定语法就要复杂些了
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部