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的开发经验，轻松实现，灵活布局。