javascript快速模板渲染引擎实现mvc

原创
2013/10/16 13:55
阅读数 3.3K

为什么需要javascript的mvc?

  很多时候我们的javascript代码里含有很多拼接html代码的片段,既不容易维护,又不好使用!那种单双引号的转义就够你蛋疼很久的了,你明白我说的意思么?明白了就好好看看下面的代码吧。

以下这段代码用很简单的替换方式通过javascript的替换方式实现了一个模板引擎。让你不再拼接复杂的html代码片段了!


用过velocity或者freemarker的人都很喜欢这些小巧易用的模板引擎。 但是悲剧的是很多前端程序员还在用js根据数据一点点的拼接代码。


感觉有用别忘了顶一下咯!~

var user={name:'david supper',age:12, gender:'man'}
我们要把它拼接成如下代码:
<div class="user_info">
  <span class="user_name">david supperman</span>
  <span class="user_age">12</span>
   <span class="user_gender">man</span>
 <div>

 如果通过js直接拼装,你需要:


<script language="javascript">

 var user={name:'david supper',age:12, gender:'man'}

 $(document).ready(function(){
	 var html='<div class="user_info">';
	 html+=' <span class="user_name">'+user.name+'</span>';
	 html+=' <span class="user_age">'+user.age+'</span>';
	 html+=' <span class="user_gender">'+user.gender+'</span>';
	 html+='</div>'
	//然后把html插入你想要的地方去
	
  });
</script>

 使用模板引擎后,你只需要在html定义一个html模板

<script id="user_info_template" type="text/x-jquery-tmpl">
	<div class="user_info">
	  <span class="user_name">#{name}</span>
	  <span class="user_age">#{age}</span>
	   <span class="user_gender">#{gender}</span>
	 <div>
</script>

有了上面的模板,我们只需要将其和数据糅合一下,就可以实现我们的模板引擎了

<script language="javascript">	


 //通过以下代码,我们就实现了javascript的mvc模式,是不是很简单,哈哈
 var user={name:'david supper',age:12, gender:'man'}

 $(document).ready(function(){
	 var template=$("#user_info_template").html();
	 var html=renderTemplate(template,user);
	//然后把html插入到你想要的地方去
 });


 /* 渲染简单模板  这个是公用方法,不要觉得比上面的代码长了额*/
 function renderTemplate(template,data){
 	var content='';
	if(data instanceof Array){
		for(var i=0;i<data.length;i++){
			content+=renderTemplate(template,data[i]);
		}
	}else{
		var t=template;
    	for(var attr in data){
    		var value=data[attr];
			t=t.replace(new RegExp("#{"+attr+"}","gm"),value);
    	}
		content+=t;
	}
 	return content;
 }
 </script>    
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
8 收藏
2
分享
返回顶部
顶部