dumb view and smart view model

https://blog.bitsrc.io/building-reusable-angular-components-best-practices-744fff49e0d

这是一篇从SOLID principal中的SRP(单一职责原则)出发,描述把Component细分的过程的文章。

抛开它的主题,里面有些附带的思想也值得一记:

Presentational Component, 也就是View的唯一的Concern就是当输入的数据进来的时候展示出来,从这个conern来看,数据甚至应该是比较静态的,至少类型是不变,应对唯一的这种类型,View该如何展示,这就是它唯一的Concern。框架提供的tag很好地帮助了展示,底层基础仍是html。在wpf中,xaml就是这种Component,应该尽可能地dump.

而Container Component(这个名字不是很好)其实就是ViewModel,其实也包括了MVC里的Controller,或者MVP里的Presenter。现在则是Angular里的Component.ts.这是个Smart的Component

不过现代程序里的Component往往要和别的Component交互,所以Angular才定义了Output(事件EventEmitter),而这也影响到了View(Presentational Component)里,以attribute的形式。其实我觉得影响展示的attribute应该和用于事件交互的Attribute分开才对。一个简单的html template不是一个很好的载体。仍然有点违反SRP,还可以进一步细分。如果把事件描述从tag中抽出来放到一个专门的文件(类似designer.cs)并可以给一个html template apply多个事件描述集,就好比apply css style一样就好了。

另外,直接在Angular中设计一个Component应该也是有可能的,就是直接放到App.Component里,IDE如果有一个专门用于Desinger的Component,在双击某一个Component的时候打开Designer就好了。