電子商務系統的設計與實現(十)：DWZ架構與第三方分頁組件整合

標籤：電子商務   dwz   dwz架構   分頁組件   

 晚上，就是剛剛，在後端管理系統中使用DWZ架構。
 先是，直接使用官網網站的Demo，dwz-jui，與程式設計語言無關的純靜態那個原始項目。

 很快就搭建好了左側菜單，開啟菜單後，出現Tab頁面，然後顯示目標頁面的內容。

 然後，就去關注表格分頁部分。 

 DWZ內建的分頁組件，感覺太麻煩了，一方面分頁分成了4個部分顯示，主要包括：
pagerForm，查詢條件
pagerHeader，分頁表格的頭部
pagerContent，分頁表格的本文
panleBar，分頁條數欄目。

另一方面，分頁html和JS中，需要顯示後端的變數。
表格本文的list集合和分頁參數都需要從後端，比如Java上下文變數中擷取。見下面的例子： 

<form id="pagerForm" method="post" action="demo_page1.html"><input type="hidden" name="status" value="${param.status}"><input type="hidden" name="keywords" value="${param.keywords}" /><input type="hidden" name="pageNum" value="1" /><input type="hidden" name="numPerPage" value="${model.numPerPage}" /><input type="hidden" name="orderField" value="${param.orderField}" /></form><div class="pageHeader"><form onsubmit="return navTabSearch(this);" action="demo_page1.html" method="post"><div class="searchBar"><table class="searchContent"><tr><td>我的客戶：<input type="text" name="keyword" /></td><td><select class="combox" name="province"><option value="">所有省市</option></select></td><td>建檔日期：<input type="text" class="date" readonly="true" /></td></tr></table><div class="subBar"><ul><li><div class="buttonActive"><div class="buttonContent"><button type="submit">檢索</button></div></div></li></ul></div></div></form></div><div class="pageContent"><div class="panelBar"><ul class="toolBar"><li><a class="add" href="demo_page4.html" target="navTab"><span>添加</span></a></li></ul></div><table class="table" width="100%" layoutH="138"><thead><tr><th width="120">客戶名稱</th></tr></thead><tbody><tr target="sid_user" rel="1"><td>天津農信社</td></tr></tbody></table><div class="panelBar"><div class="pages"><span>顯示</span><select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"><option value="20">20</option></select><span>條，共${totalCount}條</span></div><div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div></div></div>

 
     因此，我不太想使用這個內建的分頁。
     以前，秒針某個同事寫了分頁組件，我改造了下，想今後自己維護一個版本。於是，在後端使用的是自己的分頁組件fugrid.js。
但是，遇到了一個問題。 要麼是，自己的grid組件報錯，要麼是dwz的dwz.ui.js的initUI函數報錯。
分析問題：
 單獨在新頁面中，訪問grid組件所在的頁面，可以正常顯示，說明代碼是沒有問題的。
 使用內建的table，initUI函數也沒有報錯。

繼續分析：
  發現initUI方法會調用一些方法，$("div.panel", $p).jPanel();然後提示某某沒有jPanel方法，最終導致grid組件卡死了。grid組件的代碼，我不想修改，dwz組件的代碼，還沒有看懂，也不想修改，修改了今後升級就麻煩一些。
   我嘗試了一種辦法，既然是由於dwz報錯導致grid組件一直卡死，如果捕獲這個錯誤了？
       

  try{initUI();}catch(e){console.warn(e);} 

 加上try-catch塊，還是報錯。難道是緩衝？
<script src="static/framework/dwzjs/dwz.ui.js?a=1" type="text/javascript"></script>
加上一個a參數，防止緩衝，發現還是報錯。

換種方式：

function initUI(_box){var $p = $(_box || document);try {   $("div.panel", $p).jPanel();       }catch(e){console.warn(e);} }

在initUI方法內部，捕獲這個異常，終於OK啦。

不需要修改dwz的商務邏輯，不需要改動grid組件的代碼。
如果dwz升級了，只需要升級之後，再增加捕獲異常的代碼就行了，不用去關心dwz組件的邏輯。 

電子商務系統的設計與實現(十)：DWZ架構與第三方分頁組件整合