Alvis

关于 Angular 的一些感想

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

关于 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 的一个固有缺陷可以被以这种形式触发

    1. 父组件有两个子组件 A B
    2. A 组件里有一个很长很长的列表
    3. B 组件里订阅了一个经常被触发的事件(比方说 Mousemove)
    4. 然后性能就仆街了

  5. Angular 1 的依赖注入依靠的是 Regex 来解析源码，这显然是不靠谱的。Angular 2 早期的做法是使用Reflect.Metadata来获取编译器 TSC emit 出的 metadata。当前版本的 AOT 模式是在编译期将依赖的类型写在对象的ctorParameters属性

  6. 依赖注入的一些好处

    1. 所有 service 都是 lazy init 的，可以在实际调用到的时候再创建
    2. 依赖于接口而非实现(可以用签名相同的服务替代之前的服务，而不用更改代码， React 中也用类似的方法来实现不同平台的渲染)
    3. 由于上一条，测试起来比较方便，而且可以提供一组件一例的服务(这个真的有用吗?)

  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 优越的一点，更多的讨论可以参照该链接， 不过计算属性是不完备的，所以也有坏处

  1. 关于动态组件

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

  2. 关于 Web Components

    • scoped css 这个特性各家都有相应的 polyfill
    • 对于 templae 和 slot，Vue 和 Angular 都有实现，虽然 Angular(很恶劣的)没有在文档里写出来
    • 这套 API 的作用是父组件向子组件传递 View(包括 html 和 scoped css)
    • Vue 还提供了 scoped slot，可以在父组件中用子组件的数据渲染 View
技术栈 子组件中的空位 子组件中的具名空位 指定填充到某个空位 填充多个元素至某个空位 子组件的数据暴露给父组件的渲染逻辑
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 - 2024Austaras Devas