《AngularJS深度剖析与最佳实践》一1.5 实现更多功能:主题-阿里云开发者社区

开发者社区> 华章出版社> 正文
登录阅读全文

《AngularJS深度剖析与最佳实践》一1.5 实现更多功能:主题

简介:

本节书摘来自华章出版社《AngularJS深度剖析与最佳实践》一书中的第1章,第1.5节,作者 雪狼 破狼 彭洪伟,更多章节内容可以访问云栖社区“华章计算机”公众号查看

1.5 实现更多功能:主题

1.5.1 实现主题列表

我们还没有实现发帖和取帖子列表的后端功能,甚至连这个API该设计成什么样都还不清楚。不过没关系,我们可以先在前端做一些模拟数据,等到前端所需的数据结构确定下来,API也就基本成型了,这也是敏捷方法的一种应用。
我们先做些准备工作。在router.js中增加两个路由定义:

$stateProvider.state('thread', {
    url: '/thread',
    template: '<div ui-view></div>',
    abstract: true
});
$stateProvider.state('thread.list', {
    url: '/list',
    templateUrl: 'controllers/thread/list.html',
    controller: 'ThreadListCtrl as vm'
});

然后创建两个空文件:app/controllers/thread/list.js和app/controllers/thread/list.html。
接下来我们就正式开始实现。
最明显,我们需要几个字段:标题(title)、发帖人(poster)、发帖时间(dateCreated)。于是我们得出了第一个控制器:

angular.module('com.ngnice.app').controller('ThreadListCtrl', function ThreadListCtrl() {
    var vm = this;
    vm.items = [
        {
            title: '这是第一个主贴',
            poster: '雪狼',
            dateCreated: '2015-02-19T00:00:00'
        },
        {
            title: '这是第二个主贴,含有字母abcd和数字1234',
            poster: '破狼',
            dateCreated: '2015-02-19T15:00:00'
        }
    ];
    for (var i = 0; i < 10; ++i) {
        vm.items.push({
            title: '主题' + i,
            poster: 'user' + i,
            dateCreated: '2015-02-18T15:00:00'
        });
    }
});
和第一个模板:
<table class="table table-hover table-striped">
    <thead>
    <tr>
        <th>主题</th>
        <th>作者</th>
        <th>发帖时间</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in vm.items">
        <td>{{item.title}}</td>
        <td>{{item.poster}}</td>
        <td>{{item.dateCreated}}</td>
    </tr>
    </tbody>
</table>

这里起主要作用的是我们的老朋友:ng-repeat指令。
现在我们已经可以通过在地址栏输入http://localhost:5000/#/thread/list来预览效果了。
但是这里面的日期显示的仍然是ISO-8601格式的日期,对用户来说不够友好,接下来我们把它改成可读性更好些的格式。我们前面提到过,在Angular中,负责对数据进行格式化的是“过滤器”(filter),于是我们查阅Angular的API文档,发现在filter分类下有一个date过滤器,顾名思义,它应该是用来格式化日期的,于是我们把它加到dateCreated上:{{item.dateCreated|date}}。
不过,预览的时候我们发现它被格式化成了英文格式,对中文用户来说太不友好了。针对不同国家、语种的用户进行特殊处理的工作,叫作i18n,它是internationalization(国际化)的缩写,因为它中间正好有18个字符。好在,Angular已经内置了一组i18n文件,中文简体的文件名叫作angular-locale_zh-cn.js。我们把它从github的Angular项目中下载下来,然后复制到app/libraries目录里就可以了。当然,放到app的其他子目录中也可以,不过我们的约定是把除bower之外的第三方库都放到app/libraries目录下,遵循这个约定有助于提高程序的可维护性。
date过滤器还可以带参数,如果我们要把它显示成“年-月-日时:分”的自定义格式,那么就要这么写:{{item.dateCreated:date:'yyyy-MM-dd HH:mm'}}。
如果要进一步提高用户友好性,最好把时间显示成“刚才”、“一分钟前”、“昨天”等形式。这种情况下,我们可以自定义一个新的过滤器,来完成转换工作。由于这个过滤器不涉及新的知识点,就不再赘述了,你可以自己尝试实现,还可以借助一个第三方时间库momentjs来降低复杂度。

1.5.2 实现过滤功能

接下来,我们给读者提供一个搜索框,可以用它对主贴标题、作者、发帖时间进行过滤。为了展示Angular的威力,我们先不借助后端,直接在前端实现过滤功能。即使在现实项目中,前端过滤也非常有用:在数据条数较少时,前端过滤可以大幅简化代码。在做原型的时候,它也具有出色的编程速度和表现力。
前几节我们说过,过滤器实际上应该叫转换器,常见的用法为:格式化和过滤。我们已经展示过它的格式化功能,现在我们就要用到它的过滤功能了。
我们先来看代码:

<div>
    <label for="_keyword">
        过滤条件:
    </label>
    <!-- 把用户输入的结果存到vm.filter.$变量中,供后面使用 -->
    <input id="_keyword" type="text" placeholder="请输入主题、作者或发帖时间的任意部分进行筛选" ng-model="vm.filter.$"/>
</div>
<table class="table table-hover table-striped">
    <thead>
    <tr>
        <th>主题</th>
        <th>作者</th>
        <th>发帖时间</th>
    </tr>
    </thead>
    <tbody>
    <!-- 使用Angular内置的名为filter的过滤器来实现过滤 -->
    <tr ng-repeat="item in vm.items | filter:vm.filter">
        <td>{{item.title}}</td>
        <td>{{item.poster}}</td>
        <td>{{item.dateCreated|date:'yyyy-MM-dd HH:mm'}}</td>
    </tr>
    </tbody>
</table>

可以看到,为了实现前端过滤,我并没有写任何JavaScript代码,只在HTML中通过很简单的几步就实现了。
加入一个输入框,用于接收关键字,并且存入vm.filter对象上名为$的属性中。
把这个vm.filter对象作为filter过滤器的参数,filter过滤器会根据这个参数对vm.items数组进行筛选。把过滤的结果传给ng-repeat指令,Angular会据此更新显示内容。
现在,是否已经体验到了“出色的编程速度”?我们再来看“表现力”:当你输入任何字符或汉字时,它都会对每个对象中的数据进行部分匹配,并且立即更新列表。如果不考虑大数据量下的性能问题,这显然是一种相当不错的体验。
在实际开发中,我一般以2000条普通查询结果作为区分用前端过滤还是用后端过滤的界限,即:当预期的最大数据条数小于2000时,用前端过滤,否则用后端过滤。如果后端逻辑复杂,查询代价高,或者单条数据量大,传输代价高,可以适当减小这个限额。当然,如果要实现基于语义分析的模糊匹配,显然就该用后端过滤来实现了。
如果要实现后端过滤功能该怎么写呢?

<div>
    <label for="_keyword">
        过滤条件:
    </label>
    <!-- 把用户输入的结果存到vm.filter.$变量中,通过vm.search函数发起请求,把结果存入vm.items变量中 -->
    <input id="_keyword" type="text" placeholder="请输入主题、作者或发帖时间的任意部分进行筛选" ng-model="vm.filter.$" ng-change="vm.search()"/>
</div>
<table class="table table-hover table-striped">
...
    <!-- vm.items是经过后端过滤的数据 -->
    <tr ng-repeat="item in vm.items">
...
    </tr>
    </tbody>
</table>

其工作原理是这样的:
当用户进行输入时,ng-change事件会被触发,并且把过滤条件作为参数传给后端。
后端解释这些过滤条件,然后返回符合条件的数据。
前端收到这些数据,就把它赋值给vm.items。
Angular检测到vm.items变化了,就会据此更新界面。
如果要进一步改进,还可以修改ng-change的处理函数vm.search,让它在用户连续输入的时候不发起网络请求,直到用户的输入告一段落时再发起。这个看起来酷炫的功能其实不必自己写,直接用第三方库lodash的debounce函数来完成就可以了,代码如下:

var search = function() {
    // 发起网络请求,把vm.filter作为过滤条件传给后端
};
// 包装后的结果供模板调用
vm.search = _.debounce(search, 500);

就这么简单!
lodash是个很强大的JavaScript算法库,值得深入学习。

1.5.3 实现分页功能

分页和排序也是列表中常用的功能,它们同样有前端实现和后端实现两种方式。过滤、分页、排序的实现原理大同小异,在本节中,我们将一起实现前端分页功能,同时作为对上一节的复习。而后端分页功能和排序功能,我们不再讲解,读者朋友可以尝试自己实现。
我们先按照“模型驱动开发”的方式来思考分页:
我们有一大堆数据。
我们需要从中截取出一部分,显示给用户。
假设当前页码为page(我们从0开始编号),每页条目数为pageSize,则我们要截取的范围是:page pageSize到(page + 1) pageSize。
抛开形形色色的表现形式,分页的核心逻辑就是这么简单。
那么,我们如何做数据截取呢?我们首先要明白数据截取的本质就是一种过滤,其过滤条件是“起始索引号”和“截止索引号”。想通了这一点,答案就呼之欲出了:过滤器,我们的老朋友。
于是,我们设计了一个叫作page的过滤器:

angular.module('com.ngnice.app').filter('page', function () {
    return function (input, page, pageSize) {
        if (!input) {
            return input;
        }
        if (page < 0 || pageSize <= 0) {
            return [];
        }
        var start = page * pageSize;
        var end = (page + 1) * pageSize;
        return input.slice(start, end);
    };
});

由于这里涉及边界问题,容易出错,我们还要写一个单元测试来保障它的行为不会超出预期。

describe('filter > page >', function () {
    beforeEach(module('com.ngnice.app'));
    var pageFilter;
    // 注入器会忽略变量名前后的下划线
    // 每个filter其实都是一个nameFilter的服务,我们可以用这种方式快速注入,不再引用$filter服务,这样表意性也更强
    beforeEach(inject(function (_pageFilter_) {
        pageFilter = _pageFilter_;
    }));

    var items;
    beforeEach(function () {
        items = [1, 2, 3, 4, 5, 6];
    });
    it('第一页为满页时', function() {
        expect(pageFilter(items, 0, 3)).toEqual([1,2,3]);
    });
    it('第一页为不满页时', function() {
        expect(pageFilter(items, 0, 7)).toEqual([1,2,3,4,5,6]);
    });
    it('最后一页为满页时', function() {
        expect(pageFilter(items, 1, 3)).toEqual([4,5,6]);
    });
    it('最后一页为不满页时', function() {
        expect(pageFilter(items, 1, 4)).toEqual([5,6]);
    });
    it('大于最大页码时', function() {
        expect(pageFilter(items, 2, 4)).toEqual([]);
    });
    it('小于最小页码时', function() {
        expect(pageFilter(items, -2, 4)).toEqual([]);
    });
});

这里唯一需要注意的是引用filter的一个小技巧,它有助于我们理解Angular的工作原理。
官方推荐的方式是注入$filter,然后调用$filter(憄age?来获得page过滤器。事实上,在Angular中,每个filter都是一个service,只是它的名字加上了Filter后缀。比如page过滤器对应的服务名就是pageFilter。这两者是等价的,但由于我讨厌在代码中硬编码字符串,所以一般使用直接注入service的方式。
使用这个过滤器就很简单了,我们先在界面中通过一个输入框来输入页码,并且规定每页大小为5条,然后我们再想办法美化它。这也是在遵循敏捷方法:每一步只做一件事。

<table class="table table-hover table-striped">
...
    <tr ng-repeat="item in vm.items | filter:vm.filter | page:vm.page.index:5">
...
    </tr>
</table>
<label>
    页号:
    <input type="number" ng-model="vm.page.index"/>
</label>

剩下的工作就是分页标签的美化,最简单的方式是使用第三方库:angular-bootstrap中的pagination指令,它已经实现得相当不错了。如果想要自己写,这个指令也可以作为一个复杂度适中的练习题,但是要记住以下几点:
面向模型编程。
测试驱动开发。
先保障交互逻辑,再调整细节。
做完练习之后可以与angular-bootstrap的pagination指令(注意,它的起始页码是1而不是0),以及我随书源码中所实现的分页标签作对比。如果对我的实现方式感到惊讶,不用困惑,也不用着急,在下一节中,我会详细讲解这种实现思路。

1.5.4 实现主题树

把主题和回复按照回复关系组织起来,就构成了一棵“主题树”。相比传统论坛列表形式的组织方式,主题树可以更加直观地展现出回复关系,并且更方便按照分组进行操作,比如把一个回复及其后续回复收藏起来或删除。这些特性不太适合人气火爆的论坛,但是比较适合我们这个小型的读者交流社区。
树在各种前端框架中都不是一个小话题,为了避免一次引入大量新概念,我们拆成两步来实现它:首先,做一个固定层数,带有折叠和级联选择功能的树;然后,把它扩展成不限层数,可以任意递归的树。
我们先来构造模拟数据:

angular.module('com.ngnice.app').controller('ThreadTreeCtrl', function ThreadTreeCtrl() {
    var vm = this;
    vm.items = [
        {
            id: 1,
            title: '这是第一个主题',
            poster: '雪狼',
            dateCreated: '2015-02-19T00:00:00',
            items: [
                {
                    id: 11,
                    title: '这是第一个回复',
                    poster: '雪狼',
                    dateCreated: '2015-02-19T00:00:01',
                    items: [
                        {
                            id: 111,
                            title: '回复1.1',
                            poster: '破狼',
                            dateCreated: '2015-02-19T00:01:00'
                        },
                        {
                            id: 112,
                            title: '回复1.2',
                            poster: '破狼',
                            dateCreated: '2015-02-19T00:01:30'
                        }
                    ]
                },
                {
                    id: 12,
                    title: '这是第二个回复',
                    poster: '雪狼',
                    dateCreated: '2015-02-19T00:00:03'
                }
            ]
        },
        {
            id: 2,
            title: '这是第二个主题,含有字母abcd和数字1234',
            poster: '破狼',
            dateCreated: '2015-02-19T15:00:00'
        }
    ];
});
对于我们的目标来说,三层数据已经有了足够的代表性。接下来,我们就把它展示到界面上:
<ul ng-if="vm.items">
    <li ng-repeat="item1 in vm.items">
        {{item1.title}}
        <ul ng-if="item1.items">
            <li ng-repeat="item2 in item1.items">
                {{item2.title}}
                <ul ng-if="item2.items">
                    <li ng-repeat="item3 in item2.items">
                        {{item3.title}}
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

显然,它是个递归结构,但是由于Angular的一些限制,我们没法直接用指令递归的方式实现它,而要借助一些特殊的技巧,这些技巧涉及一些Angular高级知识,我们把它留到后面再讲。
接下来,我们要实现折叠功能。所谓折叠,就是把子节点隐藏起来。但这是一个面向DOM的思维方式,我们把它换成面向模型的思维方式:下级子节点的“显示与否”取决于当前节点的一个Model,即“是否折叠”($folded)。
现在我们用代码来表达这个思路:

<ul ng-if="vm.items">
    <li ng-repeat="item1 in vm.items">
        <!-- $folded是表示当前节点是否折叠的Model,点击是切换它 -->
        <div ng-click="item1.$folded = !item1.$folded">
            <!-- 有子节点时才显示加减号 -->
            <span ng-if="item1.items">
                <!-- 未折叠的显示减号 -->
                <span ng-if="!item1.$folded">-</span>
                <!-- 已折叠的显示加号 -->
                <span ng-if="item1.$folded">+</span>
            </span>
            {{item1.title}}
        </div>
        <!-- 子节点的显示与否,取决于当前节点的Model:$folded -->
        <ul ng-if="item1.items && !item1.$folded">
            <li ng-repeat="item2 in item1.items">
                <div ng-click="item2.$folded = !item2.$folded">
                    <span ng-if="item2.items">
                        <span ng-if="!item2.$folded">-</span>
                        <span ng-if="item2.$folded">+</span>
                    </span>
                    {{item2.title}}
                </div>
                <ul ng-if="item2.items && !item2.$folded">
                    <li ng-repeat="item3 in item2.items">
                        {{item3.title}}
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我们没有写一句JavaScript代码,只修改了一下HTML模板就实现了折叠功能。这里之所以用$开头,主要有两个目的,一是减小和原有数据冲突的可能,二是如果这些数据通过$http或$resource提交给服务器,它们所调用的angular.toJson()函数会忽略所有以$开头的属性,这样我们扩展出来的属性就不会被提交了。这带来一个额外的小便利:阅读的时候一看到是$开头的,也就知道是扩展出来的属性了。
但是把item1.$folded = !item1.$folded这类代码混合在HTML中是不够干净的,我们要把它重构出去。重构的方式有多种。最明显的一种是把整棵树作成一个指令,但这也是最坏的一种,事实上,这是在用写jQuery组件的思路写Angular,它会将视图和模型紧密地混合在一起,难以复用和测试。这是一种坏习惯,我就不再演示了。
好一些的是把切换的代码封装成函数,放在controller中:vm.toggle = function(item) {item.$folded = !item.$folded; },在视图中直接调用vm.toggle(item1)。这种情况下,HTML中倒是“干净”了,但控制器又“脏”了。而且一旦我们加入比折叠更复杂的代码,那么这些代码将不得不写很多份。
更好的方式是作成一个服务。我们真正要实现的逻辑,其实是对模型中的$folded属性进行操作,然后通过一些指令来告诉Angular如何让视图和模型保持同步。所以,我们只要给模型加上$foldToggle()之类的操作方法和$isFolded()之类的判断函数就可以了。我们理想的使用方式是这样的:

<ul ng-if="vm.$hasChildren()">
    <li ng-repeat="item1 in vm.items">
        <!-- 点击时调用切换折叠状态的函数 -->
        <div ng-click="item1.$foldToggle()">
            <!-- 判断是否有子节点 -->
            <span ng-if="item1.$hasChildren()">
                <!-- 隐藏私有变量$folded,改用$isFolded函数 -->
                <span ng-if="!item1.$isFolded()">-</span>
                <span ng-if="item1.$isFolded()">+</span>
            </span>
            {{item1.title}}
        </div>
        <ul ng-if="item1.$hasChildren() && !item1.$isFolded()">
        ...
        </ul>
    </li>
</ul>

显然,item1本身是不存在这三个函数的,但是我们可以加上它:

angular.module('com.ngnice.app').controller('ThreadTreeCtrl', function ThreadTreeCtrl(tree) {
    var vm = this;
    vm.items = ...
    tree.enhance(vm.items);
});

这里的tree是个我们所期望的一个工具类服务,它负责对数据进行强化,给它添加这些函数。
接下来,我们就来实现这个工具类服务:

angular.module('com.ngnice.app').service('tree', function Tree() {
    var self = this;
    // 强化条目
    var enhanceItem = function (item, childrenName) {
        item.$hasChildren = function() {
            var subItems = this[childrenName];
            return angular.isArray(subItems) && subItems.length;
        };
        item.$foldToggle = function () {
            this.$folded = !this.$folded;
        };
        item.$isFolded = function () {
            return this.$folded;
        };
    };
    // 对传进来的数据进行强化
    this.enhance = function (items, childrenName) {
        if (angular.isUndefined(childrenName)) {
            childrenName = 'items';
        }
        angular.forEach(items, function (item) {
            enhanceItem(item, childrenName);
            // 如果有子节点,则递归处理
            if (item.$hasChildren()) {
                self.enhance(item[childrenName], childrenName);
            }
        });
        return items;
    };
});

这样用起来还是不够方便,而且把强化数据的代码也都放进了控制器中,还是不够干净。
还有什么方式能让它更简单点呢?有请我们的老朋友—过滤器:

<ul ng-if="vm.$hasChildren()">
    <li ng-repeat="item1 in vm.items|tree">
        ...
    </li>
</ul>

我们记得过滤器的本质是数据转换,并且示范过它的两大主要用法:格式化和筛选。现在则是一个不常用但很有用的用法:强化,也就是为数据添加成员和方法。
我们期望有这样一个过滤器,接着就来实现它,但是我们不用从头写代码,直接使用已经写好的tree服务就可以了:

angular.module('com.ngnice.app').filter('tree', function (tree) {
    return function (items, childrenName) {
        tree.enhance(items, childrenName);
        return items;
    };
});

这是在编程中常用的一种方式:先想好准备怎么用,然后再逐步去实现它。这其实是“测试驱动开发”的一个退化变种。由于折叠的逻辑非常简单,所以我们直接用这种方式就够用了。
接下来,我们要实现一个更复杂的功能,这个功能我们就要用“测试驱动开发”的方式来实现了。
我们先来详细描述一下“级联选择”这个需求:
每个节点前有一个复选框。
选中父节点时,自动选中所有子节点。
选中所有子节点时,自动选中父节点。
取消选中所有子节点时,自动取消选中父节点。
部分选中子节点时,父节点显示为“待定”状态。
这次,我们不再像以前那样先写视图,而是直接来设计模型。“以模型为核心的思维方式”是你从新手成为Angular专家的一个重要特征。
像我们设计折叠功能时看到的一样,每个节点需要有两个方法:$checkToggle()和$isChecked()。接着,为了支持待定状态,我们还需要一个方法:$isIndeterminate()。由于$checkToggle()对当前状态的依赖比较大,测试的时候很不方便,和checkbox配合的时候也不理想。为了提供更高的可控性,我们再增加$check()、$unCheck()和$setCheckState函数。
供视图中使用的接口先定下这6个就足够了,其他的方法在我们编程的过程中自然会显现出来,现在不用急。
接下来,我们就要来实现它了。我们要在前面所写的tree服务的基础上改进一下,实现“级联选择”功能。
级联选择的逻辑远比折叠的逻辑复杂,那么,是时候请出我们的必杀器:“测试驱动开发”(TDD)了!
在FrontJet的支持下,TDD是一种享受。我们的fj serve命令会同步开启TDD模式,只要留意下它的控制台窗口,就可以开始我们的TDD之旅了。
首先,我们写一个针对tree service的单元测试文件,按照约定,我们把它命名为tree.test.js,.test.js是我们给单元测试文件加的后缀,用于和程序文件相对应的同时区分开文件名。文件内容如下:

// 用describe函数对测试进行分组
describe('tree service >', function () {
    // 每次执行前加载app模块,它依赖的模块也会被级联加载
    beforeEach(module('com.ngnice.app'));
    var tree;
    // 这里可以注入服务或控制器,注入器会忽略名称两端的下划线
    beforeEach(inject(function (_tree_) {
        tree = _tree_;
    }));
    // 把我们前面写的需求规约逐个加进来
    it('选中父节点时,自动选中所有各级子节点', function () {
    });
});

当我们保存这个文件时,FrontJet中集成的Karma会自动跑一遍单元测试,并且在控制台中给出反馈:
INFO [watcher]: Changed file "/Users/.../services/utils/tree.test.js".
PhantomJS 1.9.8 (Mac OS X): Executed 1 of 1 SUCCESS (0.001 secs / 0.016 secs)
我们看到,测试执行成功了,这是测试驱动开发的“绿灯”状态。接下来,我们先构造数据,并把它们都变为“红灯”状态,以免将来遗漏了需求。

describe('tree service >', function () {
    beforeEach(module('com.ngnice.app'));
    var tree;
    // 这里可以注入服务或控制器,注入器会忽略名称两端的下划线
    beforeEach(inject(function (_tree_) {
        tree = _tree_;
    }));
    var treeData;
    // 定义两个供测试用的工具函数
    var getFlattenData = function (items) {
        var result = items || [];
        angular.forEach(items, function (item) {
            result = result.concat(getFlattenData(item.items));
        });
        return result;
    };
    var findById = function (id) {
        return _.findWhere(getFlattenData(treeData), {id: id});
    };
    // 构造尽量少但足够有代表性的模拟数据
    beforeEach(function () {
        treeData = [
            {
                id: 1,
                items: [
                    {
                        id: 11,
                        items: [
                            {
                                id: 111
                            },
                            {
                                id: 112
                            }
                        ]
                    },
                {
                    id: 12
                    }
                ]
            }
        ];
        tree.enhance(treeData);
    });
    it('选中父节点时,自动选中直接子节点', function () {
        // 动作:选中中间节点
        findById(11).$check();
        expect(findById(111).$isChecked()).toBeTruthy();
        expect(findById(112).$isChecked()).toBeTruthy();
    });
    it('选中祖先节点时,自动选中间接子节点', function() {
        // 动作:选中根节点
        findById(1).$check();
        // 期待:子节点被选中
        expect(findById(11).$isChecked()).toBeTruthy();
        expect(findById(12).$isChecked()).toBeTruthy();
        // 期待:孙子节点被选中
        expect(findById(111).$isChecked()).toBeTruthy();
        expect(findById(112).$isChecked()).toBeTruthy();
    });
});

这段代码很长,不过做的事情并不是很多。我们先定义了测试数据,然后用代码定义了一系列断言来落实需求。每个测试的组成大致是:做一个动作,检查所期待的状态。
注意,我们把这条需求拆分成了两个:选中父节点时自动选中“直接子节点”,选中祖先节点时自动选中“间接子节点”。把它们合在一个测试中当然也是可以的,不过,作为单元测试的一条重要原则,我们应该尽可能让每个单元测试只做一件事。
我们定义完了这一系列规约,但是还没有实现tree服务,所以我们看到如下错误:

INFO [watcher]: Changed file "/Users/.../services/utils/tree.test.js".
PhantomJS 1.9.8 (Mac OS X) tree service > 选中父节点时,自动选中直接子节点 FAILED
    TypeError: 'undefined' is not a function (evaluating 'findById(11).$check()')
        at /Users/.../services/utils/tree.test.js:45
        ...
PhantomJS 1.9.8 (Mac OS X) tree service > 选中祖先节点时,自动选中间接子节点 FAILED
    TypeError: 'undefined' is not a function (evaluating 'findById(1).$check()')
        at /Users/.../services/utils/tree.test.js:51
        ...
PhantomJS 1.9.8 (Mac OS X): Executed 2 of 2 (2 FAILED) ERROR (0.001 secs / 0.014 secs)

现在两个测试全部失败了,这是测试驱动开发中的下一个状态:红灯。测试驱动开发过程中会期待红绿灯交替出现。接下来,我们就把它变为绿灯状态。
我们先修改下tree服务:

var enhanceItem = function (item, childrenName) {
    ...
    // 递归设置
    var setCheckState = function(node, checked) {
        node.$checked = checked;
        if (node.$hasChildren()) {
            angular.forEach(node[childrenName], function(subNode) {
                setCheckState(subNode, checked);
            });
        }
    };
    item.$check = function() {
        setCheckState(item, true);
    };
    item.$isChecked = function() {
        return this.$checked;
    };
};

当程序文件发生变化时,单元测试也会被自动执行。控制台中会出现下列输出:

INFO [watcher]: Changed file "/Users/.../app/services/utils/tree.js".
PhantomJS 1.9.8 (Mac OS X): Executed 2 of 2 SUCCESS (0.001 secs / 0.011 secs)

于是,我们又回到了“绿灯”状态,这就是一个TDD工作循环。对于逻辑比较复杂的功能,我们可能还要经过多个红绿灯才能完成一个工作循环。
接下来,我们按照上面的工作方式,把另外三项需求也逐步加进来,我不再把代码摘录到书中,只把最终的单元测试列在这里,大家可以尝试自己实现。

it('选中所有子节点时,自动选中父节点', function () {
    findById(111).$check();
    findById(112).$check();
    expect(findById(11).$isChecked()).toBeTruthy();
    findById(12).$check();
    expect(findById(1).$isChecked()).toBeTruthy();
});
it('取消选中所有子节点时,自动取消选中父节点', function () {
    // 先全部选中
    findById(1).$check();
    expect(findById(112).$isChecked()).toBeTruthy();
    // 逐个反选
    findById(111).$unCheck();
    findById(112).$unCheck();
    expect(findById(11).$isChecked()).toBeFalsy();
    findById(12).$unCheck();
    expect(findById(1).$isChecked()).toBeFalsy();
});
it('部分选中子节点时,父节点显示为“待定”状态', function () {
    findById(111).$check();
    expect(findById(11).$isIndeterminate()).toBeTruthy();
    expect(findById(1).$isIndeterminate()).toBeTruthy();
    // 子节点本身和没有子节点的节点不受影响
    expect(findById(111).$isIndeterminate()).toBeFalsy();
    expect(findById(12).$isIndeterminate()).toBeFalsy();
});
it('全部选中子节点时,父节点为“非待定”状态', function() {
    findById(111).$check();
    expect(findById(11).$isIndeterminate()).toBeTruthy();
    findById(112).$check();
    expect(findById(11).$isIndeterminate()).toBeFalsy();
});
it('$checkToggle会切换当前节点的选中状态', function() {
    var node = findById(111);
    node.$checkToggle();
    expect(node.$isChecked()).toBeTruthy();
    node.$checkToggle();
    expect(node.$isChecked()).toBeFalsy();
});
我们实现完服务之后,再把它应用到页面中:
<ul ng-if="vm.items">
    <li ng-repeat="item1 in vm.items">
        <div>
            <span ng-if="item1.$hasChildren()" ng-click="item1.$foldToggle()">
                <span ng-if="!item1.$isFolded()">-</span>
                <span ng-if="item1.$isFolded()">+</span>
            </span>
            <label>
            <!-- 在数据变化时,调用服务中的相应函数来更新父节点、子节点的状态 -->
            <!-- 通过自定义指令bf-check-indeterminate来把模型更新到界面上 -->
<input type="checkbox" bf-check-indeterminate="item1.$isIndeterminate()" ng-model="item1.$checked" ng-change="item1.$setCheckState (item1.$checked)"/>
                {{item1.title}}
            </label>
        </div>
        <ul ng-if="item1.$hasChildren() && !item1.$isFolded()">
            <li ng-repeat="item2 in item1.items">
                <div>
                    <span ng-if="item2.$hasChildren()" ng-click="item2.$foldToggle()">
                        <span ng-if="!item2.$isFolded()">-</span>
                        <span ng-if="item2.$isFolded()">+</span>
                    </span>
                    <label>
                        <input type="checkbox" bf-check-indeterminate="item2.$isIndeterminate()" ng-model="item2.$checked" ng-change= "item2.$setCheckState(item2.$checked)"/>
                        {{item2.title}}
                    </label>
                </div>
                <ul ng-if="item2.$hasChildren() && !item2.$isFolded()">
                    <li ng-repeat="item3 in item2.items">
                        <label>
                            <input type="checkbox" bf-check-indeterminate="item3.$isIndeterminate()" ng-model="item3.$checked" ng-change="item3.$setCheckState(item3.$checked)"/>
                            {{item3.title}}
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

现在我们还缺一个bf-check-indeterminate指令,它的实现代码如下:

angular.module('com.ngnice.app').directive('bfCheckIndeterminate', function bfCheck-Indeterminate() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(
                function () {
                    return scope.$eval(attrs.bfCheckIndeterminate);
                },
                function (value) {
                    angular.forEach(element, function (DOM) {
                        DOM.indeterminate = value;
                    });
               }
           );
        }
    };
});

测试代码如下:

describe('checkIndeterminate指令 >', function () {
    beforeEach(module('com.ngnice.app'));
    var $compile;
    var $rootScope;
    beforeEach(inject(function (_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));
    it('使用常量作为默认值', function () {
        var scope = $rootScope.$new(true);
        var dom = $compile('<input type="checkbox" bf-check-indeterminate="true" />')(scope);
        scope.$digest();
        expect(dom[0].indeterminate).toBeTruthy();
    });
    it('通过代码修改变量', function() {
        var scope = $rootScope.$new(true);
        scope.checked = true;
        var dom = $compile('<input type="checkbox" bf-check-indeterminate= "checked" />')(scope);
        scope.$digest();
        expect(dom[0].indeterminate).toBeTruthy();
        scope.checked = false;
        scope.$digest();
        expect(dom[0].indeterminate).toBeFalsy();
    })
});

可以看到,我们只响应了一个事件、写了一个很简单的自定义指令,就完成了模型和视图的绑定。
在我们实现整个功能的过程中,用TDD的方式覆盖了绝大部分交互逻辑,对这些复杂度较高、不太有把握的部分,建立了信心。然后,通过非常简单的几句代码,就把模型和视图绑定在一起了。
同时,可以看出,通过TDD方式写复杂逻辑的效率比传统方式高多了:如果是传统方式,我们得写一些代码,然后切换到浏览器中,操作几下,看结果是否符合预期,还要留意我们的新改动是否破坏了已经“完成”的部分工作逻辑;在TDD方式下,我们写好测试,然后写程序代码,随时保存、随时看测试结果,等所有测试都通过的时候,我们就知道核心逻辑已经完成了。
回忆我们曾经写过的这些指令,会发现一个共同的特点:它们都非常简单,只有少数几行语句,这些语句的作用仅仅是把一个很简单的Model的变更情况表现到视图中去。曾经有很多人问我如何对指令进行单元测试,我给出的答案是:不要测试指令。当然,这只是一个“当头棒喝”式的答案,并不意味着无法或没必要对指令进行单元测试。我要表达的核心意思是:用服务代替指令,让指令尽可能保持简约。理解这一点,也是转换到Angular“模型驱动”思维的重要一步。

1.5.5 实现递归主题树

接下来,我们就要进入Angular指令的“深水区”了。在这一节,我们会开始使用一些高级技巧来实现递归树。
指令递归嵌套自身会导致停止响应,这是我们要解决的核心问题。具体的分析过程我将在第3章“背后的原理”中讲解。这里我直接给出答案:指令的解析分成两个阶段:编译(compile)和链接(link),如果指令嵌套了,那么编译过程会被不断执行,刚执行完一次又触发一次,相当于出现了无限循环。
原因找到了,大体的解决思路也就有了:只要我们不直接嵌套自身,而是通过其他指令间接嵌套一次。当然,通过其他指令间接嵌套也同样是有问题的,除非我们能错开执行时间,比如把间接嵌套的过程放到链接阶段:生成一个live DOM,然后把生成的live DOM动态插入到期望的位置。这种方式,我们曾在“错误信息提示”指令中使用过,还记得吧?不过和上次不同的是,这次还有几个新问题:
准备如何使用?
如何取得模板?
如何取得数据?
如何生成子节点?
我们先来设想预期的用法。
首先,我们肯定需要两个指令来配合:一个上级指令,用来取得模板和数据;一个下级指令,用来渲染子节点。

<ul>
    <!-- 取得数据源,并且赋给$dataSource变量 -->
    <li bf-template="vm.items" ng-repeat="node in $dataSource">
        {{node.title}}
        <ul>
            <li bf-recurse="node.items"></li>
        </ul>
    </li>
</ul>

然后,我们来解决“如何取得模板”的问题:
对于递归指令,顾名思义,上下级的模板是完全相同的。所以,我们只要把上级节点的模板保存起来,将来用它来编译下级节点就行了。所以,我们写一个指令,其作用就是把所在的节点的HTML取下来,存到一个scope变量里。不过还有一个问题:在链接阶段,所在的节点已经变成了live DOM,我们取不到原始的HTML模板。解决方案很简单,那就是在编译阶段取模板,这个阶段的节点还是静态的。代码如下:

angular.module('com.ngnice.app').directive('bfTemplate', function bfTemplate() {
    return {
        restrict: 'A',
        compile: function (element) {
            var template = element[0].outerHTML;
            return function (scope) {
                scope.$template = template;
            };
        }
    };
});

接下来,是解决“如何取得数据”的问题。
递归指令的数据也同样是递归的。这就要求指令所依赖的scope结构也是递归的,显然,如果直接把controller的scope用于递归指令,那么将对controller产生严重的限制.我们需要一个独立的scope结构,它的数据来源于controller,但是最终我们要把它赋值给我们定义的内部数据结构。从controller中取数据的方式我们也同样在“错误信息提示”指令中使用过:scope.$eval。
于是,我们的指令修改为:

angular.module('com.ngnice.app').directive('bfTemplate', function bfTemplate() {
    return {
        restrict: 'A',
        // 提高优先级,原因稍后讲解
        priority: 2000,
        compile: function (element) {
            var template = element[0].outerHTML;
            return function (scope, element, attrs) {
                scope.$template = template;
                if (!scope.$dataSource) {
                    scope.$dataSource = scope.$eval(attrs.bfTemplate);
                }
            };
        }
    };
});

不过,还有一个问题,ng-repeat等指令具有很高的优先级,所以它会被首先执行,而这个时候bf-template指令还没有机会执行,所以$dataSource变量是空值。我们必须让bf-template指令在ng-repeat之前执行,在Angular中,这个机制叫作优先级(priority)。即,优先级高的指令会先执行。而ng-repeat的优先级是1000,于是,我们把bf-template的优先级指定为2000,确保它先执行。
最后,我们再来解决“如何生成子节点”的问题。

angular.module('com.ngnice.app').directive('bfRecurse', function bfRecurse ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // 建立一个独立作用域
            var subScope = scope.$new(true);
            // 取得本节点的数据,这个数据将被传给模板
            subScope.$dataSource = scope.$eval(attrs.bfRecurse);
            // 生成live DOM
            var dom = $compile(scope.$template)(subScope);
            // 用live DOM替换当前节点
            element.replaceWith(dom);
        }
    };
});

实现类似功能的还有一个第三方指令angular-tree-repeat,当初我第一次看到这个指令,就为它巧妙而漂亮的实现方式而惊艳,本书的实现方式也是受其启发改进来的。有兴趣的也可以对照两者的代码,体会一下我的改进思路。

1.5.6 实现“查看详情”功能

接下来,我们把递归主题树的功能扩展一下,给每个节点加一个“查看详情”链接。用户点击这个链接的时候,就跳转到“查看详情”页面。
本节很简短,主要着眼于示范如下特性:
在路由中使用参数。
通过ui-sref指令构建链接。
我们首先要实现“查看详情”页面,这包括三步:在router.js中添加路由定义,实现controller,实现模板。
新增的路由定义如下:

$stateProvider.state('thread.show', {
    // 声明一个id参数和一个title参数
    url: '/:id/show?title&poster',
    templateUrl: 'controllers/thread/show.html',
    controller: 'ThreadShowCtrl as vm'
});

可以看到,这个路由定义中声明了两个路由参数,一个是行内的id参数,一个是query参数title。
接下来就是在controller中使用了,具体代码如下:

angular.module('com.ngnice.app').controller('ThreadShowCtrl',function Thread-ShowCtrl($stateParams) {
    var vm = this;
    vm.id = $stateParams.id;
    vm.title = $stateParams.title;
    vm.poster = $stateParams.poster;
});

这里的关键是$stateParams服务。凡是从路由中传过来的参数都可以通过这个服务访问,但是这里有一个常见的坑是:只有在路由定义中声明过的参数才能使用,比如这里只声明了两个query参数:title和poster。对于URL:/thread/1/show?title=abc&poster=wzc&dateCreated=2015-03-01,接收到的参数中,title和poster都正常,而dateCreated参数为空,这就是因为前面没有声明它。
详情页中我们只实现一个最简单的界面:

编号:{{vm.id}}<br/>
标题:{{vm.title}}<br/>
作者:{{vm.poster}}

接下来,我们要做的就是从主题树中链接到详情页:

<a ui-sref="thread.show({id: node.id, title: node.title, poster: node.poster})">查看</a>

ui-sref是个angular-ui-router提供的指令,其参数是一个路由的名字,而括号中的参数是一个由各个路由参数组成的对象。如果使用系统内置的ngRoute作为路由库,那么就要自己拼接ng-href了,如:查看。虽然也不错,但从可读性和灵活性方面,要比前者差一些。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: