既然有了组件,为什么还要指令?

这个问题非常赞,很多人都有这个困惑。

很可惜,并没有文档或者资料给出明确、正面的回答。

我用自己的语言来解释一下,请跟我一步一步来:

组件与指令之间的关系

0_1516239802804_1.png

再看一下核心源代码里面的内容:

0_1516239824960_2.png

很明显,Component是Directive的子接口。

根据Angular官方文档的描述,Angular里面有3种类型的指令:

  • Component是Directive的子接口,是一种特殊的指令,Component可以带有HTML模板,Directive不能有模板。
  • 属性型指令:用来修改DOM元素的外观和行为,但是不会改变DOM结构,Angular内置指令里面典型的属性型指令有ngClass、ngStyle。如果你打算封装自己的组件库,属性型指令是必备的内容。
  • 结构型指令:可以修改DOM结构,内置的常用结构型指令有*ngFor、*ngIf和NgSwitch。由于结构型指令会修改DOM结构,所以同一个HTML标签上面不能同时使用多个结构型指令,否则大家都来改DOM结构,到底听谁的呢?如果要在同一个HTML元素上面使用多个结构性指令,可以考虑加一层空的元素来嵌套,比如在外面套一层空的<ng-container></ng-container>,或者套一层空的<div>。

有了组件为什么还要指令?

请注意:即使你认真、仔细地看完以上内容,你依然会感到非常茫然。因为有一个最根本的问题在所有文档里面都没有给出明确的解释,这个问题也是很多开发者经常来问我的,那就是:既然有了组件(Component),为什么还要指令(Directive)?

我们知道,在很多的 UI 框架里面,并没有指令的概念,它们的基类都是从 Component 开始的。比如:

  • Swing 里面基类名字就叫 Component,没有指令的概念。
  • ExtJS 里面基类是 Ext.Component,没有指令的概念。
  • Flex 里面基类名字叫 UIComponent,没有指令的概念。
  • React里面的基类名字叫 React.Component,没有指令的概念。

以下是 Swing 的类结构图:

0_1516240327490_3.png

以下是 ExtJS 3.2 的 UI 组件继承结构图局部,请注意 Ext.Component 类的位置:

0_1516240335427_4.png

下面是整体缩略图:

0_1516240355393_5.png

以下是Adobe Flex 3的类结构图:

0_1516240380869_6.png

上面这些框架都走的组件化的路子,Swing和ExtJS完全是“代码流”,所有UI都通过代码来创建;而Flex和React是“标签流”,也就通过标签的方式来创建UI。

但是,所有这些框架都没有“指令”这个概念,为什么Angular里面一定要引入“指令”这个概念呢?

根本原因是:我们需要用指令来增强标签的功能,包括HTML原生标签和你自己自定义的标签。

举例来说:<div>是一个常用的原生HTML标签,但是请不要小看它,它上面实际上有非常多的属性,这些属性都是W3C规范规定好的:

0_1516240415346_7.png

还能支持以下事件属性:

0_1516240460472_8.png

完整的列表请查看W3C规范:https://www.w3schools.com/tags/ref_standardattributes.asp

但是,这些内置属性还不够用,你想给原生的HTML标签再扩展一些属性。比方说:你想给<div>标签增加一个自定义的属性叫做my-high-light,当鼠标进入div内部时,div的背景就会高亮显示,可以这样使用<div my-high-light>。

这时候,没有指令机制就无法实现了。

总结

总结:“指令”是一个非常精妙的设计,利用它可以无入侵地扩展原生HTML的Attribute(属性)。

以我自己的观点来看,“指令”在Angular里面的重要性不亚于你们当年热捧的“双向数据绑定”。

----------这是广告分割线---------------

类似这种问题还有很多,我在gitchat上的《Angular 初学者快速上手教程》里面都做了非常详细的解释。

《Angular 初学者快速上手教程》这个系列的内容共34篇,我花了一整个月的时间全职编写,编辑帮我做了精美的文字排版。这个系列内容在gitchat上的销售量一直遥遥领先,关键才20元啊,节约你很大一块学习时间,绝对超值。

数据不会说谎,精品就是精品,嘿嘿嘿。

来,微信扫这里:

0_1516240825790_1515388789495-1.jpg

现在虽然还不太看的懂~不过先码了~谢谢!

确实是好书~

登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待