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,并且添加两个方法修改变量

typescript 复制代码
export class MotherPageCounter {
  count: number = 0;

  inrement() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}
  1. 使用响应式状态

采用tsx语法使用count

typescript 复制代码
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>
    );
  }
}
  1. 逻辑抽离

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

typescript 复制代码
@Local()
export class Counter {
  count: number = 0;

  inrement() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}
  1. 在组件中注入并使用

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

typescript 复制代码
export class MotherPageCounter {
  @Use()
  $$counter: Counter;
}

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

typescript 复制代码
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

相关推荐
前端工作日常12 小时前
ESLint 配置深度解析:parserOptions、env 和 flowtype 的核心作用与实战指南
typescript·eslint
前端拿破轮12 小时前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
天文家18 小时前
关于TypeScript中type和interface的区别与作用场景
typescript
lichenyang4531 天前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
太阳上的雨天1 天前
与 TRON (波场) 区块链进行交互的命令行工具 (CLI): tstroncli
typescript·区块链·交互·tron·trx·trc20
前端拿破轮1 天前
HomeBrew创始人都写不出来的翻转二叉树到底怎么做?
前端·算法·typescript
趣多多代言人2 天前
20分钟学会TypeScript
前端·javascript·typescript
前端啊白2 天前
面试官:回答我!在tsconfig配置了别名你为啥要在vite再配置一遍?嗯?
typescript
pimkle3 天前
LC 135 分发糖果 JavaScript ts
leetcode·typescript
烛阴3 天前
深入浅出,教你用JS/TS轻松搞定Excel与XML互转
前端·javascript·typescript