为什么需要javascript的mvc?
很多时候我们的javascript代码里含有很多拼接html代码的片段,既不容易维护,又不好使用!那种单双引号的转义就够你蛋疼很久的了,你明白我说的意思么?明白了就好好看看下面的代码吧。
以下这段代码用很简单的替换方式通过javascript的替换方式实现了一个模板引擎。让你不再拼接复杂的html代码片段了!
感觉有用别忘了顶一下咯!~
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>