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，其餘的是由於我沒用過。。。，若是有更好的方法歡迎在下方留言。