学习流行的JavaScript框架20120801-[jQuery,Dojo,MooTools]

这次是这样的一个例子：

有一个表格，最原始的表格，表格里只有数据！他看起来差不多是这样的：

HTML代码看起来是这样的：

<table id="content1">
    <thead>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Introduction</th>
    </thead>
    <tr>
        <td>1</td>
        <td>Gantian</td>
        <td>28</td>
        <td>Dancing with the birds...</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Taka</td>
        <td>25</td>
        <td>DQM is best!!!</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Woniu</td>
        <td>27</td>
        <td>FF ?? what's happend ??</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Jimmy</td>
        <td>30</td>
        <td>Coding ... to hard ...</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Xhf</td>
        <td>29</td>
        <td>Fast DFS ... HAHAHAHA</td>
    </tr>
</table>

目标是这样的：

1. 隐藏掉ID列，统一换成Checkbox列。 表格行可选即可（单选、多选）。
2. ID列、Age列支持排序。
3. Introduciton只显示前8个字符，点击显示详情后，显示全部。
4. 表格支持适当的样式润色工作。
5. 完全使用框架（无视复杂度，不独立编写插件，如果框架提供对此的支持的话） 

MooTools

    MooTools支持Class，那么那么我就尝试的定义一个Class来处理这次的问题。

    可惜，这不是一次很好的体验，首先需要处理Table，MooTools Core不提供处理方式。必须使用MooTools More来处理，MooTools More是可选组件下载。这里有一个问题发生了，组件独立性不高，彼此间有依赖性。也就是说，我要明确知道组件间的依赖关系（搞的我很头大，最后放弃了，不得不打包成一个文件，但是这个组件居然有300多K。）

    MooTools另一个让我个人觉得不足的地方是，她不提供默认Theme。Docs里的Tests里有Demo可以参考，Demo里有演示如何编写CSS Style，但是无明确指定（就是我不知道那些是默认一定要有的，那些是就这个Demo写的）。不过这个问题似乎因人而异吧。

    以下是MooTools的代码:

<script type="text/javascript">
    window.addEvent('domready', function() {
        // helper function
        var myGetSelected = function(tr, group) {
            var rst = [];
            Array.each(group, function(tr, idx) {
                rst.push(tr.getElement('td').get('text'));
            });
            console.log(rst);
        };

        // get Table
        var tb = $('content1');

        // get HtmlTable
        var myContentTable = new HtmlTable(tb, {
            sortable: true,
            thSelector: 'th.sorted', // shit 有bug！
            parsers: ['number'],
            selectable: true,
            allowMultiSelect: true // default
        });

        // add focus events
        myContentTable.addEvents({
            rowFocus: myGetSelected,
            rowUnfocus: myGetSelected
        });
    });
</script>

HTML代码需要有一点点小小的变更：

<thead>
    <tr>
        <th class='sorted'>ID</th>
        <th>Name</th>
        <th class='sorted'>Age</th>
        <th>Introduction</th>
    </tr>
</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。

<script type="text/javascript">
    $(document).ready(function() {

        /* 以下代码负责隔行添加颜色， */
        var addOddEven = function() {
            $('#content1 tbody tr:odd').removeClass('even').addClass('odd');
            $('#content1 tbody tr:even').removeClass('odd').addClass('even');
        };
        addOddEven();


        /* jQuery UI 套件： Selectable */
        $('#content1 tbody').selectable({
            filter: 'tr',
            cancel: 'a, th',
            stop: function() {
                var rst = [];
                $('.ui-selected', this)
                    .each(function() {
                        rst.push($('td:first', this).text());
                    });
                console.log(rst);
            }
        });

        /* jQuery UI 套件：Sortable, 居然不是我想想中的那样（似乎是烤拖曳完成Sort），只能自己写了 */
        var $trs = $('#content1 tbody tr');
        $('#content1 thead th').each(function(idx) {
            $(this).toggle(function(evt) {
                $trs.sort(function(trleft, trright) {
                    var left = $(trleft).find('td', this).eq(idx).text();
                    var right = $(trright).find('td', this).eq(idx).text();
                    return (left > right);
                });
                $('#content1 tbody').empty().append($trs);
                addOddEven();
            }, function(evt) {
                $trs.sort(function(trleft, trright) {
                    var left = $(trleft).find('td', this).eq(idx).text();
                    var right = $(trright).find('td', this).eq(idx).text();
                    return (left < right);
                });
                $('#content1 tbody').empty().append($trs);
                addOddEven();
            })
        });
    });
</script>
<style type="text/css">
    .odd{ background-color: #ddd; }
    .even{ background-color: #eee; }
    .ui-selectable-helper { position: absolute; z-index: 100; border:3px dotted red; }
    .ui-selecting{ background-color: #F39814; color: #FFFFFF; }
    .ui-selected{ background-color: #F39814; coloe: #FFFFFF; }
    td:hover{ cursor: default; }
    th:hover{ cursor: pointer; }
</style>

    整体来说，这段代码略显罗嗦了一点，尤其是Sort的部分，但是如果不这么写，会增加一定的代码量。我还没有想到更好的方法，Sort的方法有非常多的“臭味道”。当然这部分“臭味道”是我的代码导致的。反观Selectable部分的代码，非常的简洁，简洁到了我几乎无可挑剔的地方。

    我应该把他做成一个插件形式，这才是真正的jQuery风格。

    完成以后的效果图，差不多是这样的：

 

总结

目前似乎流行的框架的做法都是采取配置参数的形式，可以看一下MooTools的HtmlTable构造函数。和jQuery的函数调用时传入的对象。从编码上看，最大的区别，还是他们模式上的区别，一个是面向对象的，一个是基于链式的。这样的框架结构的区别在编码上会有一点点的区别：

MooTools：既支持构造函数初始化配置，也支持无参数配置的实例化对象进行‘对象.方法()’的调用。

jQuery：基本上只支持参数结构。

但是在处理UI上，就完全千奇百怪了。没什么可以说的，因为几乎就没什么一样的。

默认参数不一样，调用的方法不一样。

jQuery提供一种比较富有创意的多行选择。而MooTools在处理排序时非常的方便。

jQuery对于Select行为的结束是指“一组行为的终止，包括单选，多选，选择区域”，所以提供了stop方法，表示这组行为结束后，可以得到所选的行，当然高级的方法还有在中间的行为植入，比如selecting方法。而MooTools则只提供每一次Foucs的事件和Unfocus的事件（这个做法其实有点蠢）。

本来我以为会写很多代码，原来这个例子也只有一点点代码，还是不能有很大的区别，而且MooTools我居然有点忘了。可气啊~~需要再找个例子。