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，其余的是由于我没用过。。。，若是有更好的方法欢迎在下方留言。