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="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: "700px;height:280px;",
   
5.     valueField: "id",
   
6.     columns: [
   
7.         { type: "indexcolumn" },
   
8.         { field: "loginname", 120, headerAlign: "center", allowSort: true },
   
9.         { field: "name", 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="60px;">姓名：</td>
   
4.         <td style="150px">
   
5.             <input name="name" class="mini-textbox" />
   
6.         </td>
   
7.         <td class="form-label" style="60px;">地址：</td>
   
8.         <td style="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="343px;height:60px;"/>
    
26.         </td>        
    
27.     </tr>
    
28. </table>

复制代码

呈现效果如下：

如果完全用Javascript开发这个表单，代码量显然会增加很多，而且不易修改和扩展。
使用HTML标签的组件生成方式，开发者可以使用HTML+CSS的开发经验，轻松实现，灵活布局。