Angular等了三年，那個她已經來了

濮水大叔發表於2024-05-27
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--;
  }
}
  1. 使用響應式狀態

採用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>
    );
  }
}
  1. 邏輯抽離

將count邏輯抽離出來，建立一個Counter Bean

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

  inrement() {
    this.count++;
  }

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

使用裝飾器函式@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

相關文章