Angular 1 深度解析：组件化编程
angular 1 也要面向组件编程前端组件化是前端开发模式中一个不可逆转的趋势，三大主要前端框架 angular 1 的组件化之路
组件的特点官方文档列举了组件和指令的不同点。除此之外，一个规范的组件还应符合以下几个特点。
下面依次说明。 组件的名称规范与指令不同，组件必须是一个元素，HTML 对于这一点有特殊的规范。 HTML 规范把带有中划线的标签留给开发者使用，这样形成的元素又称作自定义元素（Custom Element）。我们虽然没有用到自定义元素的概念，但两者的行为是相似的。我们应该符合这一标准。 这一点规范对应到 例如： module.component('dialog',{
// ...
});
这是不对的。HTML 规范已经定义了 dialog 这个标准元素，重复使用标签名可能导致我们自定义的组件行为和标准元素的行为混杂到一起，导致奇葩 bug；而且如果这样做也间接导致开发者不能使用原生的 另外，就算现在标准没有定义某个元素，不代表将来不会定义。我们的程序既然跑在浏览器里，就要按规矩办事。这是一种合法的写法： module.component('customDialog',{
// ...
});
组件的自包含性一个设计良好的组件一定有它自己的行为和默认样式。 默认行为默认行为在 function CustomDialogController($service) {
this.someField = 123;
this.someMethod = function someMethod() {
}
}
CustomDialogController.$inject = ['$service'];
module.component('customDialog',{
controller: CustomDialogController,template: require('./customDialogTemplate.html'),});
因为组件默认启用 class CustomDialogController {
constructor($service) {
}
someMethod() {
}
}
CustomDialogController.$inject = ['$service'];
module.component('customDialog',});
这样做有一个问题就是其他函数不能使用 class CustomDialogController {
constructor($service) {
this.services = { $service };
}
someMethod() {
const { $service } = this.services;
}
}
// 下略
建议对于逻辑相对简单的组件的控制器使用 默认样式组件的默认样式直接使用样式表指定。 custom-dialog {
display: block;
// ...
}
对于所有浏览器不认识的标签，默认都是内联元素（ 组件的自封闭性自封闭性包含两个方面：数据的自封闭性和样式的自封闭性。 数据的自封闭性
这些数据都应该通过参数绑定 其次，参数绑定不应使用双向绑定
对于单向绑定对象的情况，由于是引用传递，也不应该修改对象内部的属性。 遇到要向外部传值的情况，推荐使用 ngModel 或 事件绑定（下面会提到） 样式的自封闭性组件间的样式不应该互相干扰，这一点可以简单的通过 custom-dialog {
display: block;
// ...
.title {
// ...
}
.body {
// ...
}
}
这样可以简单的把组件的内置样式表限制在组件内部，从而避免样式外溢。但是这种方法对在组件内部的其他组件不起效果。如果这个组件的模板中还引用了别的组件，或者这个组件被定义为可嵌入的（transclude），那么可以考虑加类名前缀： custom-dialog {
display: block;
.custom-dialog {
&-title {
// ..
}
&-body {
}
}
}
组件的可复用性组件为复用而生，拥有良好自封闭性的组件必然是可复用的，因为这个组件不受任何外部因素干扰。组件的复用形式包括
等等。一个高度可复用的组件则可以被称为控件，是可以单独投稿 当然，有些组件（比如单独的页面）可能复用需求没那么高，可以视组件的复用程度不同，从组件的自封闭性和整体代码量做一些取舍。 组件的定制化一个高度可复用的组件一定可以被定制。 行为的定制化通过参数绑定实现组件行为的定制化。例如： <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;
}
}
}
这时只需要文档中说明标题颜色使用 .mydialog {
--dialog-title-color: red;
}
组件的生命周期从创建至销毁，组件有自己的生命周期（lifecycle），而不像指令那样把 scope 作为生命周期。常用的回调函数如下：
这些函数也是绑定在 class CustomDialogController {
constructor() {}
onInit() {}
onChanges({ prop1,prop2 }) {}
onDestroy() {}
}
组件间的通信组件间通信是一个让很多人头疼的问题，通常有这样 3 种情况 子 -> 父这种情况有标准的实现方式：事件绑定。例如 class CustomDialogController {
close($value) {
this.hide = true;
this.onClose({ $value });
}
}
module.component('customDialog',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 });
}
}
});
方案并不完美。如果有更好的建议欢迎提出。 结语有人可能问既然三大前端框架都是组件化的，何必还要在 完（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |