分享下今天的作业，有关排序以及高阶函数

作业是要做一个简单的页面，一个表格，里面是几个电影的信息，要求点击“类型”按类型排列电影，点击“时长”按时长排列电影。下面是js部分的源码：

function Movie(poster, name, type, duration, time) {
        this.poster = poster;
        this.name = name;
        this.type = type;
        this.duration = duration;
        this.time = time;
    };

    function print(mov) {
        var tbody = document.getElementsByTagName('tbody')[0];
        for (var i = 0; i < mov.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            var tr = tbody.getElementsByTagName('tr')[i];
            var td = document.createElement('td');
            td.innerHTML = '<img src=' + mov[i].poster + '><br>' + mov[i].name;
            tr.appendChild(td);
            var td = document.createElement('td');
            td.innerHTML = mov[i].type;
            tr.appendChild(td);
            var td = document.createElement('td');
            td.innerHTML = mov[i].duration;
            tr.appendChild(td);
            var td = document.createElement('td');
            td.innerHTML = mov[i].time;
            tr.appendChild(td);
        }
    };

    function Sort() {
    };
    Sort.prototype.byAttr = function (attr) {
        return function getSort(a, b) {
            if (a[attr] > b[attr]) {
                return 1;
            } else if (a[attr] == b[attr]) {
                return 0;
            } else {
                return -1;
            }
        }
    };
    Sort.prototype.byName = function (arr) {
        arr.sort(
            function compareFunction(param1, param2) {
                return param1.name.localeCompare(param2.name, "zh");
            }
        );
    };
    Sort.prototype.byType = function (arr) {
        arr.sort(
            function compareFunction(param1, param2) {
                return param1.type.localeCompare(param2.type, "zh");
            }
            //this.byAttr('Type')
        );
    };
    Sort.prototype.byDuration = function (arr) {
        arr.sort(
            this.byAttr('duration')
        );
    };
    Sort.prototype.byTime = function (arr) {
        arr.sort(
            this.byAttr('time')
        );
    };

    function clearAll() {
        document.getElementsByTagName('tbody')[0].innerHTML = '';
    };
    var m1 = new Movie('images/天使之城.jpg', '天使之城', '剧情片', '115min', '1998年4月10日');
    var m2 = new Movie('images/超新约全书.jpg', '超新约全书', '喜剧片', '114min', '2015年9月1日');
    var m3 = new Movie('images/飞越疯人院.jpg', '飞越疯人院', '剧情片', '133min', '1975年11月19日');
    var m4 = new Movie('images/楚门的世界.jpg', '楚门的世界', '剧情片', '103min', '1998年6月1日');
    var movies = [m1, m2, m3, m4];
    var sort = new Sort();
    //console.log(movies);
    print(movies);
    var th = document.getElementsByTagName('th');
    th[0].onclick = function () {
        clearAll();
        sort.byName(movies);
        print(movies);
    }
    th[1].onclick = function () {
        clearAll();
        sort.byType(movies);
        print(movies);
    }
    th[2].onclick = function () {
        clearAll();
        sort.byDuration(movies);
        print(movies);
    }
    th[3].onclick = function () {
        clearAll();
        sort.byTime(movies);
        print(movies);
    }

在定义了电影以后，用print函数直接输出内容，现在tbody中塞一个tr，再往里面依次塞td，td里面依次装每个电影的信息，点击的时候，先清除tbody里的内容，然后再print函数执行一遍。

排序部分的话，其中中文排序是用的按拼音排序，这里贴一篇博客作为这个方法的参考。
还有一部分代码如下：

    Sort.prototype.byAttr = function (attr) {
        return function getSort(a, b) {
            if (a[attr] > b[attr]) {
                return 1;
            } else if (a[attr] == b[attr]) {
                return 0;
            } else {
                return -1;
            }
        }
    };

这个getSort可以参考数组对象的sort方法的详细内容，这里的话是引入一个attr参数，来决定对对象中的哪一个属性来排序。

以上~