关于Angular的一些感想

发表于更新于阅读时长 4 分钟

关于 Angular 的一些感想

  1. 共享模块这个设计并不是 over engineering,这实际上是说,如果你希望你写的 { pipe, directive, component }可以被别人写的模块调用,那你必须显式的声明它,这是很有价值的

  2. Angular 相对于 Vue 来说确实是不够新手友好,对比一下文档就看的很清楚了,Vue 的文档一上来就把框架的核心优势写出来了(reactive),相比之下 Angular 文档的第一节是架构概览......

  3. Angular 的实现方式是

    • 对于普通情况,使用 zone.js 劫持所有异步,在每次异步调用之后 diff 数据
    • 也可以禁用前一种,手动调用 changdeDetection

    和其他框架的主要区别在于不 diff dom(view),而是 diff viewmodel(model 在 view 中用到的子集)

  4. 因此 Angular 的一个固有缺陷可以被以这种形式触发

    • 父组件有两个子组件 A,B
    • A 组件里有一个很长很长的列表
    • B 组件里订阅了一个经常被触发的事件(比方说 Mousemove)
  5. Angular 1 的依赖注入依靠的是 Regex 来解析源码,这显然是不靠谱的.Angular 2 早期的做法是使用 Reflect.Metadata 来获取编译器 TSC emit 出的 metadata.当前版本的 AOT 模式是在编译期将依赖的类型写在对象的ctorParameters属性

  6. 依赖注入的一些好处

    • 所有 service 都是 lazy init 的,可以在实际调用到的时候再创建
    • 依赖于接口而非实现(可以用签名相同的服务替代之前的服务,而不用更改代码, React 中也用类似的方法来实现不同平台的渲染)
    • 由于上一条,测试起来比较方便,而且可以提供一组件一例的服务(这个真的有用吗?)
  7. Httpheaders 和 HttpParameters 是 Immutable 的,这是因为,在一个请求被发送出去之后,再改变它的值是没有意义的,甚至会造成问题;在解析返回值的时候如果用到这两者,可以保证它们一定没有被改变

  8. RxJS 提供了相当强大的抽象能力,其中一些的语义能完美契合某种 user case,但使用它们毫无疑问会增加理解难度,所以未必是好做法.而且 RxJS 的体积即使在 tree shaking 之后也不能忽视

  9. 对比 Vue 的计算属性,Angular 里则有

    • 如果你只在 view 里使用它,可以使用 pure 的 pipe(这事实上对应了 Vue 的 filter)
    • 如果你还要在逻辑里使用它,那可以使用 getter,但这会导致在每一次脏检查的时候这个 getter 都会被执行(在 dev 模式下会被执行两次)
    • 当然自己实现一个带缓存的纯函数并不困难
    • 还有 Mobx-Angular 可以使用,但这会增大包体积,提高复杂度

    可以说这是 Vue 相对于 Angular 优越的一点,更多的讨论可以参照该链接, 不过计算属性是不完备的,所以也有坏处 然后性能就仆街了

  10. 关于动态组件

    • 早期版本的 Angular 非常麻烦,要在 ts 里完成这么一串步骤 class -> resvole to componentFactory -> viewRef.createElement(componentFactory) -> mount to view
    • Angular4 里提供了 ngComponentOutlet
    • Vue 中则是v-bind:is=""
  11. 关于 Web Components

    • scoped css 这个特性各家都有相应的 polyfill
    • 对于 templae 和 slot,Vue 和 Angular 都有实现,虽然 Angular(很恶劣的)没有在文档里写出来
    • 这套 API 的作用是父组件向子组件传递 View(包括 html 和 scoped css)
    • Vue 还提供了 scoped slot,可以在父组件中用子组件的数据渲染 View
技术栈 子组件中的空位 子组件中的具名空位 指定填充到某个空位 填充多个元素至某个空位 子组件的数据暴露 s 给父组件的渲染逻辑
Web Component slot element slot with name slot(attribute name) template -
Angular ng-content select(这个支持所有 CSS selector) ngProjectAs ng-container -
Vue slot name slot(attribute) template scoped slot
React & Vue 嵌入表达式 props.children props Fragment render props
  1. Angular 会在写 innerHTML 时进行过滤,虽然我确实想不出什么情况需要这么做
  2. Angular 的一个槽点是模板 url 和样式 url 一定要写明,不能默认查找同名文件,似乎是 dev team 认为这样做不好
  3. 完全不知道 Angular Flex-Layout的意义在哪里...
© 2016 - 2022Austaras Devas