angularJS中组件复用和封装

博文

在angularJS项目开发中遇到使用表格的场景，于是引入了号称angularJS中扩展性最好的表格smart-table组件，代码只有四五百行，功能只提供了渲染、数据项选择、排序等等简单的功能。而我的任务是给表格加入加载状态监控、全选、更多按钮等等功能，这过程涉及到angularJS组件的复用。

我们都熟悉jQuery组件开发模式，定义组件类，在该组件类的原型链上添加方法，然后在jQuery上绑定相应的入口函数，大致如下：

(function ($) {
    function Dropdown (options) { /* ... */ }
    Dropdown.prototype.close = function () {};
    Dropdown.prototype.open = function () {};
    $.fn.dropdown = function (options) {
        // 触发行为
        if (typeof options === 'string') {
            this.data('dropdown')[options]();
        // 实例化
        } else {
            this.data('dropdown', new Dropdown(options));
        }
    };
    $.fn.dropdown.Constructor = Dropdown;
})(jQuery);

我们定义了一个下拉框组件，匿名函数中定义组件类Dropdown，而组件的方法都添加到Dropdown类原型链中，接着我们通过jQuery的原型链$.fn.dropdown将入口函数暴露出去，入口函数用于处理组件的创建和动作分发，最后通过Constructor属性将构造函数暴露出去。

jQuery插件的复写很简单，直接对类方法进行改写：

var proto = $.fn.dropdown.Constructor.prototype;
proto.close = function () {};

然而angularJS不像jQuery简单的暴露，angularJS层层封装使得在外部进行复写变得困难。下面通过标签页组件和弹窗组件的例子，分别从控制器，指令和作用域三个层面介绍，如何在尽可能不改动源码的前提下进行angularJS组件的复用。

控制器继承

我们常用控制器来写具体页面的业务逻辑，很少涉及到其中this的使用，这往往让我们忘记，angularJS控制器是一个类。而在angularJS组件开发中，控制器中定义的是了整个组件的核心代码，比如一个简单的标签页组件：

<tab-box>
    <tab name="tabA">标签页A</tab>
    <pane name=tabA>
        标签页A内容
    </pane>
</tab-box>

标签页组件包含了tab-box、tab、pane三个指令，分别是标签页容器，标签，标签页内容块，其定义如下：

app.directive('tabBox', function () {
    return {
        controllerAs: 'tabBoxCtrl',
        controller: function ($scope) {
            $scope.state = {
                page: null
            };
            this.setPage = function (page) {
                $scope.state = page;
            }
        }
    };
});
app.directive('tab', function () {
    return {
        require: 'tabBox',
        link: function (scope, $elem, attr, ctrl) {
            $elem.on('click', function () {
                ctrl.setPage(attr.name);
            });
        }
    };
});

上面的代码所做的事情是：父指令的控制器tabBoxCtrl明确的定义作用域结构，并暴露出一个setPage方法，用于标签页的切换，而tab指令中则使用require指明和父指令之间的依赖关系，link函数的第四个参数中可以拿到tabBoxCtrl的实例，从而在tab指令后续的点击事件中，便可以调用到父指令控制器中的方法setPage

tab-box是标签页的最顶层指令，即父指令，其中定义的控制器tabBoxCtrl统一负责作用域和暴露方法，而tab子指令中则使用父指令暴露出来的方法，而不是直接操作作用域。

以上是angularJS组件开发的简单流程。当我们引入第三方组件，我们希望在原组件的基础上构建一个新的组件，我们只需要保留原组件的核心逻辑。我们可以采用控制器继承的方法，通过$controller服务将指定控制器进行实例化，该指定控制器的行为和状态就能够完美的拷贝下来。

比如我们要修改tab-box组件的行为，我们希望标签页在鼠标悬浮的时候进行标签页切换。我们可以新建另一个指令my-tab-box，直接复用tab-box控制器的主逻辑：

app.directive('myTabBox', function () {
    return {
        controller: function ($scope, $controller) {
            // 实例化控制器
            var parent = $controller('tabBoxCtrl', {
                $scope: $scope
            });
            angular.extend(this, parent);
            // 新增方法
            this.myMethod = function () {};
        }
    };
});
app.directive('myTab', function () {
    return {
        require: 'myTabBox',
        link: function (scope, $elem, attr, ctrl) {
            $elem.on('hover', function () {
                // 依旧可以调用setPage方法 
                ctrl.setPage(attr.name);
            });
        }
    };
});

以上代码我们创建了一个新的组件my-tab-box，在控制器中通过$controller实例化父控制器，并通过angular.extend将父控制器的方法绑定到了当前控制器的上下文中。这过程中，my-tab-box的状态和行为就完全拷贝了tab-box了。正是如此，之后的myTab子指令中，我们可以调用到setPage方法。

这种方式适用于仅复用原组件的主逻辑和方法。除此之外，我们很可能需要直接复用原组件，只修改其中少量功能。

指令复写

angularJS中，同名指令是可以多次定义，按照定义的先后顺序依次执行。

上述tab-box的复用中，如果仅仅是标签页的点击事件改成了鼠标悬浮事件，我们可以通过指令二次定义的方式，对指令行为进行修改：

// 在外部再次定义tab指令
app.directive('tab', function () {
    return {
        require: 'tabBox',
        link: function (scope, $elem, attr, ctrl) {
            $elem
            .off('click')
            .on('hover', function () {
                ctrl.setPage(attr.name);
            });
        }
    };
});

在angularJS解析tab指令时，会按照源码中的第一次定义为标签绑定点击事件，接着执行外部复写代码中第二次定义，为标签解除点击事件绑定，并绑定鼠标悬浮事件。

多次定义指令的方式还可以直接改写控制器。

在控制器继承的介绍中，我们提到了使用$controller对tab-box标签页组件的逻辑进行复用，重新开发一个新的组件，但如果我们希望直接修改tab-box的行为，而不是重新开发一个新的组件，那么我们可以通过指令来对控制器进行修改。比如tab-box指令新增一个方法：

app.directive('tabBox', function () {
    return {
        require: '^tabBox',
        link: function (scope, $elem, attr, ctrl) {
            // 新增方法
            ctrl.newMethod = function () {};
        }
    };
});

以上，我们在外部代码中对tabBox进行再次声明，通过require:'^tabBox'，让tabBox依赖于其本身，从而我们就可以拿到tabBox本身的控制器实例（link函数的第四个参数），之后，我们就可以在这个实例上进行功能扩展或者功能改写了。

封装

组件开发还有种情况是，我们只需要对组件进行封装，而不需要改写组件的行为，比如我们页面使用统一界面的趋势图，我们只需对highcharts提供统一的参数，这些代码封装成一个trendChart组件，每次调用只需要传入相应的数据trendChart.update(data)，而不需要在业务代码中重复编写相关公共的配置项。

在angularJS项目开发中，引入了angular-bootstrap库提供的弹窗组件，其调用方式是：

app.controller('myCtrl', function ($scope, $uibModal) {
    $uibModal.open({
        templateUrl: 'myWindow.html',
        scope: $scope
    });
});

由于项目中弹窗分成头部、主体、底部三个部分，弹窗的模版需要进行统一的改写，我们可以新建一个服务myModal对$uibModal进一步封装：

app.factory('myModal', function ($uibModal) {
    return {
        open: function (options) {
            var scope = options.scope;
            // 错误的将自定义数据绑定到了原作用域上
            scope.newData = {};
            // 错误的将自定义操作绑定到了原作用域上
            scope.newMethod = function () {};
            $uibModal.open(options);
        }
    };
});

由于我们需要改动模版，其中又有新增的逻辑代码，这处理过程中自定义操作和自定义数据都需要保存到作用域下，就想上述代码中，自定义数据和操作都绑定到了options.scope中，然而options.scope是外层的作用域（控制器中存放业务逻辑的作用域），组件的数据就污染了当前存放业务逻辑的作用域，特别是触发多层弹窗组件时，数据就会互相污染。所以我们希望每个弹窗都有自己的作用域，而且弹窗的作用域继承于原作用域。所以我们应该使用原作用域创建一个子作用域：

app.factory('myModal', function ($uibModal) {
    return {
        open: function (options) {
            // 创建子作用域
            var scope = options.scope.$new();
            // 在子作用域中存储数据和操作
            scope.newData = {};
            scope.newMethod = function () {};
            options.scope = scope;
            $uibModal.open(options);
        }
    };
});

通过$new方法，我们能创建一个继承原作用域的子作用域，现在我们自定义的数据和方法都存储到了子作用域中，而没有污染到原作用域。

梳理一下封装的过程：控制器在调用弹窗时，控制器的作用域传给了myModal中，myModal服务使用该作用域生成了一个子作用域，而子作用域会传给$uibModal组件，$uibModal拿到子作用域后，再生成一个子作用域，所以这里面一共有三个作用域，他们的关系是：控制台作用域->myModal存储数据作用域->$uibModal作用域。

在angularJS中，作用域的继承是通过原型链来实现的，我们要注意到的是，myModal自定义作用域是作为中间层出现的，如果其中某些数据项覆盖了顶层作用域，那么作为最底层作用域的$uibModal弹窗，其内部对应的数据就无法访问到顶层作用域。所以我们在涉及到作用域继承的封装时，用来存储中间操作和状态的作用域，其名下开辟的存储空间一定是越少越好，而且名称也是越特殊越好，下面是相应的改写:

app.factory('myModal', function ($uibModal) {
    return {
        open: function (options) {
            var scope = options.scope.$new();
            // 取用特殊名称，避免覆盖父作用域
            scope._modalData_ = {};
            // 不要开辟太多存储空间，通常方法、状态、数据各一个足矣
            scope._modalMethod_ = {
                newMethod: function () {}
            };
            options.scope = scope;
            $uibModal.open(options);
        }
    };
});