javascript高速テンプレートレンダリングエンジンmvcを実現します.

なぜjavascriptのmvcが必要ですか?
  多くの場合、私たちのjavascriptコードには多くのスプライスコードの断片が含まれています.メンテナンスも簡単ではないし、使いにくいです.そのようなシングルクォーテーションマークの意味は卵が長い間痛いということです.私の話の意味が分かりますか?分かりました.下のコードをよく見てください.
以下のコードは簡単な代替方式でjavascriptの代替方式によってテンプレートエンジンを実現しました.もう複雑なコードのセグメントをつなぎ合わせません.
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テンプレートを定義するだけです.

<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>