jQuery MiniUI開發系列之：HTML標簽配置

全部使用Javascript寫一個界面，是一件很困難的事。
1）要求有較高的Javascript編程能力。
2）會造成“代碼樹”問題。一級又一級子"children"，需要"{"和"}"對應，嵌套層次過多，會是一場災難。
3）難以排錯。JS是解釋性語言，漏掉個","、"}"號，運行的時候才發現，而且很難直接定位到行。
4）維護困難。一個開發者寫的復雜JS代碼，另一個開發者很難接手。
5）布局困難。需要復雜的布局控件，並且難以做到原生HTML+CSS方式的布局效果。

MiniUI給開發者推薦的開發方式，是使用HTML標簽來配置出界面，而不是用JS來生成。
比如創建一個DataGrid：

1. <div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
   
2.     url="../data/dataservice.aspx?method=SearchEmployees"  valueField="id"
   
3. >
   
4.     <div property="columns">
   
5.         <div type="indexcolumn" ></div>
   
6.         <div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號</div>   
   
7.         <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>  
   
8.     </div>
   
9. </div>

復制代碼

如果是Javascript的方式，可以這樣寫：

1. var grid = new mini.DataGrid();
   
2. grid.set({
   
3.     url: "../data/dataservice.aspx?method=SearchEmployees",
   
4.     style: "width:700px;height:280px;",
   
5.     valueField: "id",
   
6.     columns: [
   
7.         { type: "indexcolumn" },
   
8.         { field: "loginname", width: 120, headerAlign: "center", allowSort: true },
   
9.         { field: "name", width: 120, headerAlign: "center", allowSort: true }
   
10.     ]
    
11. });
    
12. grid.render(document.body);

復制代碼

以上創建一個單獨的表格控件，還看不出兩種開發方式的差別。
下面我們來創建一個稍微復雜一點的表單：

1. <table class="form-table" border="0" cellpadding="1" cellspacing="2">
   
2.     <tr>
   
3.         <td class="form-label" style="width:60px;">姓名：</td>
   
4.         <td style="width:150px">
   
5.             <input name="name" class="mini-textbox" />
   
6.         </td>
   
7.         <td class="form-label" style="width:60px;">地址：</td>
   
8.         <td style="width:150px">
   
9.             <input name="addr" class="mini-textbox" />
   
10.         </td>
    
11.     </tr>
    
12.     <tr>
    
13.         <td class="form-label">性別：</td>
    
14.         <td >
    
15.             <input name="gender" class="mini-radiobuttonlist" data="[{id: 1, text: '男'}, {id: 2, text: '女'}]"/>
    
16.         </td>
    
17.         <td class="form-label">年齡：</td>
    
18.         <td >
    
19.             <input name="age" class="mini-spinner" />
    
20.         </td>
    
21.     </tr>
    
22.     <tr>
    
23.         <td class="form-label">備注：</td>
    
24.         <td colspan="3" >
    
25.             <input name="remarks" class="mini-textarea" style="width:343px;height:60px;"/>
    
26.         </td>        
    
27.     </tr>
    
28. </table>

復制代碼

呈現效果如下：

如果完全用Javascript開發這個表單，代碼量顯然會增加很多，而且不易修改和擴展。
使用HTML標簽的組件生成方式，開發者可以使用HTML+CSS的開發經驗，輕松實現，靈活布局。