共计 1806 个字符,预计需要花费 5 分钟才能阅读完成。
Angular 生态丰富,功能强大,支撑了许多大型项目的开发。而且一直在前方等待着其他框架跟上。但是不得不直面的一个问题就是:“在等待其他框架跟上的这三年”,Angular 在陆陆续续抛弃之前引以为豪的设计。又由于大量的历史包袱,这些设计变更又做得扭扭捏捏,做不到轻装上阵。比如 NgModule 之于 Standalone,zone.js 之于 Singals,Rxjs 更是一言难尽
Angular 虽然有许多超前的架构设计和工程化能力,但是就目前而言,仍有以下不足:
- 响应式系统不好用:即便是新引入的 Signal,如果要访问一个状态值,需要像函数一样调用,这是反直觉的实现方式
- 对 tsx 支持不友好:全网很难找到 angular+tsx 的最佳实践。单靠模版,支撑大型业务系统的开发,难度是很大的
- ioc 容器太过繁琐:看看文档就知道了,angular 劝退新人的点很多,ioc 繁琐是最主要的
- 模块化隔离性不够好,拖泥带水:虽然 angular 引入了模块化概念,但是模块之间隔离不彻底。比如我在 A 模块实现了一个 service,如果要在 B 模块使用,就需要明确指定 service 在 A 模块的文件路径,而不是指定一个名称就行。这样就让模块耦合很深。类似这样的设计问题还有很多
而 Cabloy-Front 就很好的解决了 angular 的这些短板。Cabloy-Front 是一款支持 ioc 容器的 Vue3 框架,有以下特点:
- 底层采用 vue3 的响应式系统:在 ioc 容器的加持下,定义响应式状态不再需要ref/reactive,也不再需要ref.value
- 在独立的 render class 中书写 tsx 代码,从而让 tsx 代码更加舒展、从容
- 提供了两类 ioc 容器:一类是全局 ioc 容器,可以实现 pinia 的能力。另一类是组件实例 ioc 容器,该容器与 Vue 组件实例绑定,在这个容器中的所有 Class 实例都可以在组件实例范围之内共享数据和逻辑
- 模块化体系:实现了完全隔离的模块化体系。模块作为一个相对独立的业务单元,包含各种类型的资源,包括 Config 配置、Constant 常量、Locale 国际化、Error 错误异常、Component 组件,等等。在跨模块访问这些资源时,是基于名称寻址,而不是基于资源的原始文件路径寻址,因此,心智负担更低
- 更优雅的 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 (
count(ref): {this.count}
);
}
}
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 (
count(ref): {this.$$counter.count}
);
}
}
Cabloy-Front 框架已开源:https://github.com/cabloy/cabloy-front
正文完