高级 Angular 组件模式 (3b)

03-b Enhance Components with Directives

原文: Enhance Components with Directives

Kent C. Dodds的第四篇文章中的一个重要元素在上一篇文章中没有涉及,使用withToggle高阶组件(HoC, react中的常用模式)可以将<toggle-on><toggle-off><toggle-button>组件中的公用逻辑分离出来。

虽然上一篇文章中上面提及的三个组件并没有太多的公用逻辑,可以万一它们有公用逻辑呢?如果我们想要提供更加声明式的功能,比如能够显式的声明它们使用的<toggle>组件实例而非最邻近的父实例。

同时,因为<toggle>组件的模板并不存在任何的变动,我们可以将它转化为一个指令,这样我们可以以更加灵活的方式来使用它。

目标

  • 允许我们的<toggle>组件能够以tag的形式或者attribute的形式使用,如<toggle>或者<div toggle></div>
  • 允许通过`withToggle```指令显式地设置<toggle>组件

实现

1)将<toggle>作为一个指令

<toggle>组件改变为指令十分简单,因为它本身的模板仅仅是<ng-content></ng-content>,在组件渲染时,<ng-content>会被替换为我们当前组件标签内包含的内容,所以我们可以直接移除它,并使用@Directive装饰器来描述<toggle>组件,如下:

@Directive({
  exportAs: 'toggle',
  selector: 'toggle, [toggle]',
})
export class ToggleDirective {}

你可能注意到了,指令的选择器允许toggle指令可以以标签名属性名的形式来使用。对于exportAs关键字是必须要提供的,因为这是当我们需要在别的指令或者组件能够获取toggle指令引用的名字,会在这个系列文章的第5章详细删除exportAs(Handle Template Reference Variables with Directives)。

2)withToggle指令

在这个新的指令中,我们将会封装关于如何选取需要绑定某个toggle指令实例的逻辑。

首先,我们的设想是这样的,每一个组件注入withToggle指令,而不是直接注入最邻近的父toggle指令。同时每个使用withToggle指令的组件通过使用withToggle.toggle来访问它所绑定的toggle指令的实例,如下:

@Component({
  selector: 'toggle-off',
  template: `<ng-content *ngIf="!withToggle.toggle?.on"></ng-content>`,
})
export class ToggleOffComponent {
  constructor(public withToggle: WithToggleDirective) {}
}

其次,withToggle指令将它自身与toggle指令的选择器绑定(就是两个指令的选择器是相同的),同时增加一个额外的选择器[withToggle],如下:

@Directive({
  exportAs: 'withToggle',
  selector: 'toggle, [toggle], [withToggle]',
})
export class WithToggleDirective //...

现在withToggle指令为它的子组件们提供所绑定的toggle指令实例,无论这个实例是显示绑定的,还是默认的父toggle指令。关于其中实现的具体细节,可以参考文章最后的附录部分

成果

我们的app.component.html现在可以通过三种不同的使用方式来展现内容。

1)基本

<div toggle #firstToggle="toggle">
  ...
  <toggle #secondToggle="toggle">
    ...
  </toggle>
</div>

注意#firstToggle#secondToggle视图变量是如何使用toggle组件的,前者使用属性声明的方式,后者使用标签名声明方式,无论怎样,它们都按理想中那样运行。

而且,#secondToggle是嵌套在#firstToggle中的,所以它的子组件使用的是它本身的开关状态,而非#firstToggle中的,这符合我们的预期。

2)显式引用

<p [withToggle]="firstToggle">
  First:
  <toggle-on>On</toggle-on>
  <toggle-off>Off</toggle-off>
  <toggle-button></toggle-button>
</p>

这里没有任何toggle指令是当前p标签的子组件的祖先,但是通过withToggle指令,我们可以让所有的子组件使用#firstToggletoggle指令实例。

3)自定义组件

<div [withToggle]="firstToggle">
  <labelled-state toggleName="First"></labelled-state>
  <labelled-button toggleName="First"></labelled-button>
</div>
<labelled-state toggleName="Second" [withToggle]="secondToggle"> </labelled-state>
<labelled-button toggleName="Second" [withToggle]="secondToggle"> </labelled-button>

withToggle指令甚至可以通过DI机制注入到内部的任何自定义组件中,如<labelled-state>组件和<labelled-button>都没有任何关于withToggle或者toggle的引用声明。它们无需关心这个开关状态的来源,它们仅仅需要知道的是,根据这个开关状态,如何与它们的子组件进行交互。

附录

withToggle的实现,是一个标准的指令声明方式,除了它的构造方法,如下:

constructor(
  @Host() @Optional() private toggleDirective: ToggleDirective,
) {}

值得注意的有两点:

  • @Host():这个装饰器的作用是,可以限制从属于当前指令的DI注入器,仅注入绑定到某个满足特定条件指定或者组件上的toggle指令实例,而不是从它的祖先组件们中注入。(这里选择器为空,则为宿主对象)
  • @Optional():这个装饰器会告诉编译器,当注入器没有找到任何可注入的toggle指令时,不要抛出错误(如果我们手动的指定某个引用),这样在它无法被注入时,使它保持undefined即可。

现在我们可以很容易的理解在ngOnChanges生命周期钩子函数中的代码的作用,

this.toggle = this.withToggle || this.toggleDirective;
  • 如果我们的@Input()被指定,那么使用它的值
  • 如果没有,则尝试去使用在当前宿主对象上注入的toggle指令实例
  • 如果没有,则使用undefined

当前的this指定withToggle本身,所以拥有它引用的子组件都可以访问它。

在线代码演示(自备梯子): https://stackblitz.com/edit/a...

译者注

在这一节中,主要进行了以下几方面的改进:

  • 简化toggle本身,因为它一直是作为一个容器组件使用的,所以完全可以以指令(可以理解为没有模板的组件)的形式存在
  • 依赖注入(DI)的机制虽然很强大,但是受限于它的运作原理(关于具体的运作原理可以参考官方文档)。这里原作者使用一个额外的withToggle指令作为中间件,来作为toggle指令的托管容器。这部分理解起来可能需要先了解一下视图变量和exportAs的相关的知识
  • 对于toggle指令实例的获取逻辑,采用平稳退化的策略,就好比人在实际生活中思考问题的方式一样。

这种开发模式,在实际工作中,我有一次在重构公司项目中一个关于表单组件的过程中曾使用过,之所以使用这种方式,是因为在表单组件中,会存在一些关于联动校验或者分组的需求,如果将这部门逻辑封装为service或者直接写在controller内部,越到后面会发现逻辑复杂度越高,从而越来越难维护。

使用这种模式,将复杂的逻辑划分成小的颗粒,再封装为独立的指令,在需要用到这些逻辑的组件中注入这些指令即可,指令的特点就是一般都会比较简洁,只会做一些简单的事情,相比之下,维护一个十分复杂的service和维护若干简单的指令,我更倾向于后者。

原文链接:segmentfault.com

上一篇:VUE2.X过滤器的使用方法
下一篇:关于window.performance的点滴

相关推荐

  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    (/public/upload/4dc64bf14f4bd714fcd87e98b6a10373) 第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两...

    2 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • 魔方实时通信一对一音视频组件

    魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎 魔方实时通信,请点击这个(https://www.shixincube.com/) 继上一个im聊天组件增加了发动语音,语音...

    2 年前
  • 高阶组件之属性代理

    新组件类继承子React.component类,对传入的组件进行一系列操作,从而产生一个新的组件,达到增强组件的作用 操作props 访问ref 抽取state 封装组件 ...

    1 年前
  • 高阶组件HOC - 小试牛刀

    1. 前言 老毕曾经有过一句名言,叫作“国庆七天乐,Coding最快乐~”。所以在这漫漫七天长假,手痒了怎么办?于是乎,就有了接下来的内容。。。 2. 一个中心 今天要分享的内容有关高阶组件...

    2 年前
  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀(https://github.com/SmallStoneSK/Blog/issues/6)尝到高价组件的甜头之后,现已深陷其中无法自拔。。。

    2 年前
  • 高阶函数&amp;&amp;高阶组件

    高阶函数 特点: 接受函数类型的参数。 返回值是函数。 高阶函数具有可扩展性。 常见的高阶函数: 定时器 setTimeout(); setInterval() Promise(); 数组相关:...

    4 个月前
  • 高级选择器解析

    高级选择器解析 一、什么是伪类? 注意!:状态类写法分两种,比如 li:hover 表示选择li本体,li:hover&gt;a表示选择li下面的a元素,状态类选择器只能向下或者向兄弟元素,...

    1 个月前
  • 高级程序设计:第7章-函数表达式

    函数表达式是JavaScript中的一个既强大又容易令人困惑的特性。 定义函数表达式的方法 1.函数声明 先有function关键字,然后是函数的名字,就是指定函数名的方式。

    1 年前
  • 高级前端面试题大汇总(只有试题,没有答案)

    面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 ...

    2 年前

官方社区

扫码加入 JavaScript 社区