Angular 等了三年，那个她已经来了

Angular 生态丰富，功能强大，支撑了许多大型项目的开发。而且一直在前方等待着其他框架跟上。但是不得不直面的一个问题就是：“在等待其他框架跟上的这三年”，Angular 在陆陆续续抛弃之前引以为豪的设计。又由于大量的历史包袱，这些设计变更又做得扭扭捏捏，做不到轻装上阵。比如 NgModule 之于 Standalone ，zone.js 之于 Singals ，Rxjs 更是一言难尽

Angular 虽然有许多超前的架构设计和工程化能力，但是就目前而言，仍有以下不足：

1. 响应式系统不好用：即便是新引入的 Signal ，如果要访问一个状态值，需要像函数一样调用，这是反直觉的实现方式
2. 对 tsx 支持不友好：全网很难找到 angular+tsx 的最佳实践。单靠模版，支撑大型业务系统的开发，难度是很大的
3. ioc 容器太过繁琐：看看文档就知道了，angular 劝退新人的点很多，ioc 繁琐是最主要的
4. 模块化隔离性不够好，拖泥带水：虽然 angular 引入了模块化概念，但是模块之间隔离不彻底。比如我在 A 模块实现了一个 service ，如果要在 B 模块使用，就需要明确指定 service 在 A 模块的文件路径，而不是指定一个名称就行。这样就让模块耦合很深。类似这样的设计问题还有很多

而Cabloy-Front就很好的解决了 angular 的这些短板。Cabloy-Front 是一款支持 ioc 容器的 Vue3 框架，有以下特点：

1. 底层采用 vue3 的响应式系统：在 ioc 容器的加持下，定义响应式状态不再需要ref/reactive，也不再需要ref.value 
2. 在独立的 render class 中书写 tsx 代码，从而让 tsx 代码更加舒展、从容
3. 提供了两类 ioc 容器：一类是全局 ioc 容器，可以实现 pinia 的能力。另一类是组件实例 ioc 容器，该容器与 Vue 组件实例绑定，在这个容器中的所有 Class 实例都可以在组件实例范围之内共享数据和逻辑
4. 模块化体系：实现了完全隔离的模块化体系。模块作为一个相对独立的业务单元，包含各种类型的资源，包括 Config 配置、Constant 常量、Locale 国际化、Error 错误异常、Component 组件，等等。在跨模块访问这些资源时，是基于名称寻址，而不是基于资源的原始文件路径寻址，因此，心智负担更低
5. 更优雅的 ioc 容器开发体验：采用依赖注入和依赖查找相结合的方式，大量减少装饰器的使用，让代码更简洁、更优雅。优先使用依赖查找的机制可以达到化类型于无形的效果？简而言之，就是无须标注类型，却能享受到“类型约束”和“智能提示”的好处

口说无凭，我们简单看一下cabloy-front的代码风格是怎样的：

1 、定义响应式状态

在组件中定义一个响应式变量 count ，并且添加两个方法修改变量

export class MotherPageCounter {
  count: number = 0;

  inrement() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

2 、使用响应式状态

采用 tsx 语法使用 count

export class RenderPageCounter {
  render() {
    return (
      <div>
        <div>count(ref): {this.count}</div>
        <button onClick={() => this.inrement()}>Inrement</button>
        <button onClick={() => this.decrement()}>Decrement</button>
      </div>
    );
  }
}

3 、逻辑抽离

将 count 逻辑抽离出来，创建一个 Counter Bean

@Local()
export class Counter {
  count: number = 0;

  inrement() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

4 、在组件中注入并使用

使用装饰器函数 @Use 注入 bean

export class MotherPageCounter {
  @Use()
  $$counter: Counter;
}

采用 tsx 语法使用已注入的 bean 实例

export class RenderPageCounter {
  render() {
    return (
      <div>
        <div>count(ref): {this.$$counter.count}</div>
        <button onClick={() => this.$$counter.inrement()}>Inrement</button>
        <button onClick={() => this.$$counter.decrement()}>Decrement</button>
      </div>
    );
  }
}

Cabloy-Front 框架已开源：https://github.com/cabloy/cabloy-front