jq的简易模板生成

因为我们之前在ajax在后台取值然后循环出来到页面上的时候都是字符串拼接，如下所示：

var html = '';
for(var i=0;i<data.length;i++){
    var record = data[i];
    html += '<div class="border_bottom social_box b_fff">'+
      .....
        '</div>';
}复制代码

这样的话个人感觉拼接内容一多就不美观，不利于维护。因此我们可以现在页面上写好模板，然后把值给传进去就行了，还可以根据需求看看是否需要循环。首先是模板：

<script type="text/tmplate" id="popup_val" >
    <p class='mui_flex popup_val'  data-arr='{{data-arr}}'>
    <label class='label_t width_06'>{{data-members}}</label>
    <span class="ico_delete">{{data-name}}</span>
    </p>
</script>复制代码

然后就是根据字段去替换相关的值

var popup_family=$("#popup_val").html();//获取模块内容
var new_popup_family='';//修改弹窗选项卡的值
 for(var i;i<data.length;i++){
      new_popup_family = del_html_tags(popup_family, "{{data-arr}}", data[i].arr);
      new_popup_family = del_html_tags(popup_family, "{{data-members}}", data[i].members);
      $('body').append( new_popup_family);
}
//在模板替换完值后添加到需要循环的div里就行了。复制代码

//自定义修改字段
var del_html_words;
function del_html_tags(str, reallyDo, replaceWith) {
    var e = new RegExp(reallyDo, "g");//正则匹配，g为全局匹配
    del_html_words = str.replace(e, replaceWith);//替换
    return del_html_words;
}
//替换规则为
del_html_tags("模块内容", "需要替换的字段", "替换内容")；复制代码

这样的话我在调用ajax去循环模板的时候就只需要在里面加这一段就行了，而且需要替换什么值都一目了然。

var popup_family=$("#popup_val").html();//获取模块内容
var new_popup_family='';//修改弹窗选项卡的值
 for(var i;i<data.length;i++){
      new_popup_family = del_html_tags(popup_family, "{{data-arr}}", data[i].arr);
      new_popup_family = del_html_tags(popup_family, "{{data-members}}", data[i].members);
      $('body').append( new_popup_family);
}复制代码

当然这只是个人感觉，当代码分开不混淆在一起的时候找起来就方便多了，要是论方便的话还得数Vue，其他的是因为我没用过。。。，如果有更好的方法欢迎在下方留言。