jq的簡易模板生成

教父君發表於2018-11-08

因為我們之前在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，其他的是因為我沒用過。。。，如果有更好的方法歡迎在下方留言。

相關文章