学习流行的JavaScript框架20120801-[jQuery,Dojo,MooTools]
这次是这样的一个例子：
有一个表格，最原始的表格，表格里只有数据！他看起来差不多是这样的：
HTML代码看起来是这样的：
1: <table id="content1">
2: <thead>
3: <th>ID</th>
4: <th>Name</th>
5: <th>Age</th>
6: <th>Introduction</th>
7: </thead>
8: <tr>
9: <td>1</td>
10: <td>Gantian</td>
11: <td>28</td>
12: <td>Dancing with the birds...</td>
13: </tr>
14: <tr>
15: <td>2</td>
16: <td>Taka</td>
17: <td>25</td>
18: <td>DQM is best!!!</td>
19: </tr>
20: <tr>
21: <td>3</td>
22: <td>Woniu</td>
23: <td>27</td>
24: <td>FF ?? what's happend ??</td>
25: </tr>
26: <tr>
27: <td>4</td>
28: <td>Jimmy</td>
29: <td>30</td>
30: <td>Coding ... to hard ...</td>
31: </tr>
32: <tr>
33: <td>5</td>
34: <td>Xhf</td>
35: <td>29</td>
36: <td>Fast DFS ... HAHAHAHA</td>
37: </tr>
38: </table>
目标是这样的：
-
隐藏掉ID列，统一换成Checkbox列。表格行可选即可（单选、多选）。 - ID列、Age列支持排序。
- Introduciton只显示前8个字符，点击显示详情后，显示全部。
- 表格支持适当的样式润色工作。
- 完全使用框架（无视复杂度，不独立编写插件，如果框架提供对此的支持的话）
MooTools
MooTools支持Class，那么那么我就尝试的定义一个Class来处理这次的问题。
可惜，这不是一次很好的体验，首先需要处理Table，MooTools Core不提供处理方式。必须使用MooTools More来处理，MooTools More是可选组件下载。这里有一个问题发生了，组件独立性不高，彼此间有依赖性。也就是说，我要明确知道组件间的依赖关系（搞的我很头大，最后放弃了，不得不打包成一个文件，但是这个组件居然有300多K。）
MooTools另一个让我个人觉得不足的地方是，她不提供默认Theme。Docs里的Tests里有Demo可以参考，Demo里有演示如何编写CSS Style，但是无明确指定（就是我不知道那些是默认一定要有的，那些是就这个Demo写的）。不过这个问题似乎因人而异吧。
以下是MooTools的代码:
1: <script type="text/javascript">
2: window.addEvent('domready', function() {
3: // helper function
4: var myGetSelected = function(tr, group) {
5: var rst = [];
6: Array.each(group, function(tr, idx) {
7: rst.push(tr.getElement('td').get('text'));
8: });
9: console.log(rst);
10: };
11:
12: // get Table
13: var tb = $('content1');
14:
15: // get HtmlTable
16: var myContentTable = new HtmlTable(tb, {
17: sortable: true,
18: thSelector: 'th.sorted', // shit 有bug！
19: parsers: ['number'],
20: selectable: true,
21: allowMultiSelect: true // default
22: });
23:
24: // add focus events
25: myContentTable.addEvents({
26: rowFocus: myGetSelected,
27: rowUnfocus: myGetSelected
28: });
29: });
30: </script>
HTML代码需要有一点点小小的变更：
1: <thead>
2: <tr>
3: <th class='sorted'>ID</th>
4: <th>Name</th>
5: <th class='sorted'>Age</th>
6: <th>Introduction</th>
7: </tr>
8: </thead>
完成以后差不多是这样的：
Dojo
Dojo提供了非常丰富的table操作组件，放在了dojox.grid下。从命名可以看出，基本上都是扩展组件的。
Dojo是以全组件的方式出现的，这一点让我十分的费解。Dojo拆解自己库的方式让我有点发指！是的，发指！从没见过如此复杂的拆分。虽然本意上Dojo可能建议“按需索取”但是事实上，他把问题变的相当的复杂化。以至于不能很简单的处理。
jQuery
jQuery的Core里对Table支持的几乎是0。因为我没有在Core里看到显示的操作方式。在jQuery的UI组件里倒是有对Table的操作，目前只有Selectable和Sortable。
jQuery也是采用可选组件的方式，我还是一次性全部生成。
另一个我比较喜欢的内容是jQuery UI组件提供了Theme包配合UI套件，并且Theme可选。可高级配置！但必须要承认，她的包一下子变得有1000KB+了。里面包含了一些简单的例子。(在这个例子中，我完全无视了Theme。
以下是jQuery版本的Demo。
1: <script type="text/javascript">
2: $(document).ready(function() {
3:
4: /* 以下代码负责隔行添加颜色， */
5: var addOddEven = function() {
6: $('#content1 tbody tr:odd').removeClass('even').addClass('odd');
7: $('#content1 tbody tr:even').removeClass('odd').addClass('even');
8: };
9: addOddEven();
10:
11:
12: /* jQuery UI 套件： Selectable */
13: $('#content1 tbody').selectable({
14: filter: 'tr',
15: cancel: 'a, th',
16: stop: function() {
17: var rst = [];
18: $('.ui-selected', this)
19: .each(function() {
20: rst.push($('td:first', this).text());
21: });
22: console.log(rst);
23: }
24: });
25:
26: /* jQuery UI 套件：Sortable, 居然不是我想想中的那样（似乎是烤拖曳完成Sort），只能自己写了 */
27: var $trs = $('#content1 tbody tr');
28: $('#content1 thead th').each(function(idx) {
29: $(this).toggle(function(evt) {
30: $trs.sort(function(trleft, trright) {
31: var left = $(trleft).find('td', this).eq(idx).text();
32: var right = $(trright).find('td', this).eq(idx).text();
33: return (left > right);
34: });
35: $('#content1 tbody').empty().append($trs);
36: addOddEven();
37: }, function(evt) {
38: $trs.sort(function(trleft, trright) {
39: var left = $(trleft).find('td', this).eq(idx).text();
40: var right = $(trright).find('td', this).eq(idx).text();
41: return (left < right);
42: });
43: $('#content1 tbody').empty().append($trs);
44: addOddEven();
45: })
46: });
47: });
48: </script>
49: <style type="text/css">
50: .odd{ background-color: #ddd; }
51: .even{ background-color: #eee; }
52: .ui-selectable-helper { position: absolute; z-index: 100; border:3px dotted red; }
53: .ui-selecting{ background-color: #F39814; color: #FFFFFF; }
54: .ui-selected{ background-color: #F39814; coloe: #FFFFFF; }
55: td:hover{ cursor: default; }
56: th:hover{ cursor: pointer; }
57: </style>
整体来说，这段代码略显罗嗦了一点，尤其是Sort的部分，但是如果不这么写，会增加一定的代码量。我还没有想到更好的方法，Sort的方法有非常多的“臭味道”。当然这部分“臭味道”是我的代码导致的。反观Selectable部分的代码，非常的简洁，简洁到了我几乎无可挑剔的地方。
我应该把他做成一个插件形式，这才是真正的jQuery风格。
完成以后的效果图，差不多是这样的：
总结
目前似乎流行的框架的做法都是采取配置参数的形式，可以看一下MooTools的HtmlTable构造函数。和jQuery的函数调用时传入的对象。从编码上看，最大的区别，还是他们模式上的区别，一个是面向对象的，一个是基于链式的。这样的框架结构的区别在编码上会有一点点的区别：
MooTools：既支持构造函数初始化配置，也支持无参数配置的实例化对象进行‘对象.方法()’的调用。
jQuery：基本上只支持参数结构。
但是在处理UI上，就完全千奇百怪了。没什么可以说的，因为几乎就没什么一样的。
默认参数不一样，调用的方法不一样。
jQuery提供一种比较富有创意的多行选择。而MooTools在处理排序时非常的方便。
jQuery对于Select行为的结束是指“一组行为的终止，包括单选，多选，选择区域”，所以提供了stop方法，表示这组行为结束后，可以得到所选的行，当然高级的方法还有在中间的行为植入，比如selecting方法。而MooTools则只提供每一次Foucs的事件和Unfocus的事件（这个做法其实有点蠢）。
本来我以为会写很多代码，原来这个例子也只有一点点代码，还是不能有很大的区别，而且MooTools我居然有点忘了。可气啊~~需要再找个例子。