一、用途 可視區域即我們瀏覽網頁的設備肉眼可見的區域，如下圖 在日常開發中，我們經常需要判斷目標元素是否在視窗之內或者和視窗的距離小於一個值（例如 100 px），從而實現一些常用的功能，例如： 圖片的懶載入 列表的無限滾動 計算廣告元素的曝光情況 可點擊鏈接的預載入 二、實現方式 判斷一個元素是否 ...
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的代碼風格是怎樣的：
- 定義響應式狀態
在組件中定義一個響應式變數count，並且添加兩個方法修改變數
export class MotherPageCounter {
count: number = 0;
inrement() {
this.count++;
}
decrement() {
this.count--;
}
}
- 使用響應式狀態
採用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>
);
}
}
- 邏輯抽離
將count邏輯抽離出來，創建一個Counter Bean
@Local()
export class Counter {
count: number = 0;
inrement() {
this.count++;
}
decrement() {
this.count--;
}
}
- 在組件中註入並使用
使用裝飾器函數@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
