javascript快速模板渲染引擎實現mvc

爲何須要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>