Angular 1 深度解析:组件化编程

Stella981
• 阅读 749

angular 1 也要面向组件编程

前端组件化是前端开发模式中一个不可逆转的趋势,三大主要前端框架 angular 2 react vue 都不约而同的把组件化编程作为自己的一大卖点,angular 1 作为一个历史相对悠久的框架,在私生子 angular 2 的推动下,终于也搭上了组件化编程的末班车,公司里那些老项目终于也有机会体验组件化编程的滋味。

angular 1 的组件化之路

angular 1 中类似组件化的编程思想其实很早就有,只不过那时候不叫组件,而叫指令(Directive),指定 restrict: 'E' 后这个指令就与如今组件的用法很相似了。angular 1.5 中,又将指令根据 angular 2 的类似概念加以限制,脱胎为如今的组件(Components)。

组件的特点

官方文档列举了组件和指令的不同点。除此之外,一个规范的组件还应符合以下几个特点。

  1. 组件的标签名称必须包含中划线
  2. 组件拥有良好的生命周期
  3. 组件有自包含性
  4. 组件有自封闭性
  5. 组件有可复用性
  6. 组件可以被定制化

下面依次说明。

组件的名称规范

与指令不同,组件必须是一个元素,HTML 对于这一点有特殊的规范。

HTML 规范把带有中划线的标签留给开发者使用,这样形成的元素又称作自定义元素(Custom Element)。我们虽然没有用到自定义元素的概念,但两者的行为是相似的。我们应该符合这一标准。

这一点规范对应到 angular 1 中即为:组件名称必须带有驼峰形式。

例如:

module.component('dialog', {
    // ...
});

这是不对的。HTML 规范已经定义了 dialog 这个标准元素,重复使用标签名可能导致我们自定义的组件行为和标准元素的行为混杂到一起,导致奇葩 bug;而且如果这样做也间接导致开发者不能使用原生的 dialog 标签。

另外,就算现在标准没有定义某个元素,不代表将来不会定义。我们的程序既然跑在浏览器里,就要按规矩办事。这是一种合法的写法:

module.component('customDialog', {
    // ...
});

组件的自包含性

一个设计良好的组件一定有它自己的行为和默认样式。

默认行为

默认行为在 angular 1 中用控制器(Controller)定义。

function CustomDialogController($service) {
    this.someField = 123;
    this.someMethod = function someMethod() {

    }
}
CustomDialogController.$inject = ['$service'];

module.component('customDialog', {
    controller: CustomDialogController,
    template: require('./customDialogTemplate.html'),
});

因为组件默认启用 controllerAs,所有变量和函数都是绑定到 this 上的,所以你也可以使用 ES2015class 语法来组织代码:

class CustomDialogController {
    constructor($service) {

    }

    someMethod() {

    }
}
CustomDialogController.$inject = ['$service'];

module.component('customDialog', {
    controller: CustomDialogController,
    template: require('./customDialogTemplate.html'),
});

这样做有一个问题就是其他函数不能使用 constructor 里注入的服务(Service),只能通过 this 中转一次。我个人的做法是这样:

class CustomDialogController {
    constructor($service) {
        this.services = { $service };
    }

    someMethod() {
        const { $service } = this.services;
    }
}
// 下略

建议对于逻辑相对简单的组件的控制器使用 function 定义,复杂的组件使用 class 定义,后者代码的层次要更为清晰易读。

默认样式

组件的默认样式直接使用样式表指定。

custom-dialog {
    display: block;
    // ...
}

对于所有浏览器不认识的标签,默认都是内联元素(display: inline),对于组件来说通常不是想要的。所以自定义的组件通常至少要有 display: (inline-)block 来改变元素的默认显示方式。

组件的自封闭性

自封闭性包含两个方面:数据的自封闭性和样式的自封闭性。

数据的自封闭性

angular 1 中,组件自身的 scope 已经是隔离的(isolate),即组件的 scope 不继承自父级 scope(__proto__null)。除此之外,一个规范的组件不应该直接使用外部的数据,因为这样会破坏组件的可复用性。举几个例子:

  1. $rootScope
  2. $root、$parent(模板中)
  3. 路由参数
  4. localStorage、sessionStorage

这些数据都应该通过参数绑定 binding 传入。如果组件是路由插件生成,那么可以用 resolve

其次,参数绑定不应使用双向绑定 =,规范的组件不应(直接)修改组件外部传入的数据。官方推荐的参数绑定方式有两种

  1. < 单向绑定,绑定可变数据。通常用于给组件传递数据
  2. @ 字符串绑定,绑定字符串。通常用于指定组件行为

对于单向绑定对象的情况,由于是引用传递,也不应该修改对象内部的属性。

遇到要向外部传值的情况,推荐使用 ngModel 或 事件绑定(下面会提到)

样式的自封闭性

组件间的样式不应该互相干扰,这一点可以简单的通过 scss 的样式嵌套(Nesting)实现:

custom-dialog {
    display: block;
    // ...

    .title {
        // ...
    }

    .body {
        // ...
    }
}

这样可以简单的把组件的内置样式表限制在组件内部,从而避免样式外溢。但是这种方法对在组件内部的其他组件不起效果。如果这个组件的模板中还引用了别的组件,或者这个组件被定义为可嵌入的(transclude),那么可以考虑加类名前缀:

custom-dialog {
    display: block;

    .custom-dialog {
        &-title {
            // ..
        }

        &-body {

        }
    }
}

组件的可复用性

组件为复用而生,拥有良好自封闭性的组件必然是可复用的,因为这个组件不受任何外部因素干扰。组件的复用形式包括

  1. 一个页面中使用多次
  2. 在多个页面中使用
  3. ng-repeat
  4. 自己套自己(递归树结构)
  5. 整个源代码拷贝到其他项目中

等等。一个高度可复用的组件则可以被称为控件,是可以单独投稿 npm 项目库的。

当然,有些组件(比如单独的页面)可能复用需求没那么高,可以视组件的复用程度不同,从组件的自封闭性和整体代码量做一些取舍。

组件的定制化

一个高度可复用的组件一定可以被定制。

行为的定制化

通过参数绑定实现组件行为的定制化。例如:

<custom-dialog x-title="My Dialog" x-modal="true"><!-- 与标签名一样,自定义属性名也应该使用中划线 -->
    <!--content -->
</custom-dialog>


module.component('customDialog', {
    template: require('./customDialogTemplate.html'),
    transclude: true,
    bindings: {
        title: "@",
        modal: '<',
    },
});

出于使用方便的考虑,定制用的参数都是可选的,组件内部实现应该给每个定制参数设定默认值。

样式的定制化

组件风格定制可以使用 class 判断。

custom-dialog {
    display: block;
    // ...

    .title {
        font-size: 16px;
        // ...
    }

    &.big {
        .title {
            font-size: 24px;
        }
    }
}

使用时

<custom-dialog x-title="My Dialog" class="mydialog big"></custom-dialog>

深度定制样式比较好的方式是 CSS 属性(CSS Variable,注意不是 SCSS 属性)。

custom-dialog {
    display: block;
    // ...

    .title {
        font-size: 16px;
        color: var(--dialog-title-color, #333);
        // ...
    }

    &.big {
        .title {
            font-size: 24px;
        }
    }
}

这时只需要文档中说明标题颜色使用 --dialog-title-color 这个 CSS 变量就好,外部使用不依赖于组件内部 DOM 实现。使用时

.mydialog {
    --dialog-title-color: red;
}

组件的生命周期

从创建至销毁,组件有自己的生命周期(lifecycle),而不像指令那样把 scope 作为生命周期。常用的回调函数如下:

  • $onInit():组件被初始化时调用。与 constructor 不同,angular 1 确保 $onInit 被调用时组件的所有参数绑定都被正确赋值。
  • $onChanges(changeObj):组件参数绑定值被改变时调用。用于监听绑定值的变化,初次绑定时也会调用这个函数。
  • $onDestroy():组件被销毁时调用。用于清理内部资源如 $interval 等。

这些函数也是绑定在 this 上的。如果 controller 使用 ES2015class 定义方式,可以这么写:

class CustomDialogController {
    constructor() {}

    onInit() {}

    onChanges({ prop1, prop2 }) {}

    onDestroy() {}
}

组件间的通信

组件间通信是一个让很多人头疼的问题,通常有这样 3 种情况

子 -> 父

这种情况有标准的实现方式:事件绑定。例如

class CustomDialogController {
    close($value) {
        this.hide = true;
        this.onClose({ $value });
    }
}

module.component('customDialog', {
    controller: CustomDialogController,
    template: require('./customDialogTemplate.html'),
    bindings: {
        onClose: '&',
    },
});

使用时:

<custom-dialog on-close="$ctrl.handleClose(value)"></custom-dialog>

这种方式也可以用于子组件向父组件传值。

父 -> 子

用于触发子组件的某个动作。除了改变某个在子组件内部监听变化的绑定参数值外,行之有效的方式就只有事件广播。

子组件先监听某个事件

$scope.$on('custom-dialog--close', () => this.close());

父组件发送广播

$scope.$broadcast('custom-dialog--close');

切记:事件是全局性的。当有组件复用的情况时请使用标识指定接收对象(BUS 模型);另外最好给事件名添加组件前缀。

同级组件

请通过父级组件中转

子 -> 某全局性组件

这个显示 Notification 时最常用。遇到这种情况时,可以封装服务(Service)。例如:

module.component('globalNotification', {
    controller: class GlobalNotificationController {
        constructor(notificationService) {
            notificationService.component = this;
        }

        show(props) {
            // ...
        }
    }
});

module.factory('notify', function NotifyService() {
    return {
        warn(msg) {
            this.show({ type: 'warn', text: msg });
        }
        error(msg) {
            this.show({ type: 'error', text: msg });
        }
    }
});

方案并不完美。如果有更好的建议欢迎提出。

结语

有人可能问既然三大前端框架都是组件化的,何必还要在 angular 1 上实现。殊不知 angular 1 的组件诞生的初衷就是为了减少向 angular 2 迁移的难度。机会总是留给有准备的人,哪天老板大发慈悲表示给你把代码重写的时间,你却看着项目里满屏的 $scope.abc = xxx 不知所措,这岂不是悲剧。。。

本文同时发布在:https://segmentfault.com/a/1190000014841897

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
2年前
vue+element 表格formatter数据格式化并且插入html标签
前言   vue中element框架,其中表格组件,我既要行内数据格式化,又要插入html标签一贯思维,二者不可兼得也一、element表格数据格式化  !(https://oscimg.oschina.net/oscnet/3c43a1cb3cbdeb5b5ad58acb45a42612b00.p
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Java修道之路,问鼎巅峰,我辈代码修仙法力齐天
<center<fontcolor00FF7Fsize5face"黑体"代码尽头谁为峰,一见秃头道成空。</font<center<fontcolor00FF00size5face"黑体"编程修真路破折,一步一劫渡飞升。</font众所周知,编程修真有八大境界:1.Javase练气筑基2.数据库结丹3.web前端元婴4.Jav
徐小夕 徐小夕
3年前
《精通react/vue组件设计》之5分钟教你实现一个极具创意的加载(Loading)组件
前言本文是笔者写组件设计的第八篇文章,今天带大家用5分钟实现一个极具创意的加载(loading)组件.涉及的核心知识点主要是css3相关特性,如果大家非常熟悉,可直接跳过介绍直接看正文.时刻问自己:是否具备创造力?笔记前端组件的一般分类:通用型组件:比如Button,Icon等.布局型组件:比如Grid,Layout布
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这