wufengteam core統一中心註冊器功能解析

2022-11-23 14:00:35

一、功能解析

統一中心註冊器，顧名思義可以理解為將需要具備的資產彙總到統一的地方實現實現管控。並且能夠做到資產的統一性、完整性和可設定性。

這裡的資產指的是元件、圖示、方法、設定等可支援統一管控的東西。

拿我們之前做產品預演的一個 demo "無鋒零程式碼平臺"來舉個例子。

零程式碼平臺最基礎的就是要提供可拖拽設定的元件。因為做的是平臺，所以我們要儘可能的支援讓外部的資產適配我們的平臺，且要保證統一的規則。那麼如何做到統一和開放的平衡就變得尤為重要。

二、使用場景

1、元件註冊

通過 import { wufengController } from '@wufengteam/core'; 來引出統一中心註冊器的主角。

當用戶開發完自定義的元件，就可以通過以下的設定將元件註冊進去。

wufengController.registerComponent(Text, { ...config }, "pc");

從上述的程式碼中我們可以看出這個註冊元件的能力需要傳入三個引數。首先是開發人員研發的客製化元件。

其次是該元件的設定表，比如：元件對應的圖示、元件的名稱、所在分組、傳入的預設引數、樣式編輯器等設定。這裡會在下個部分：原始碼解析中來分析。這裡只需要瞭解一個大致的能力即可。

那麼最後就是元件對應的裝置，分為 pc 和 h5 兩個引數，來區分 pc 端和行動端的網頁。

很多元件在 pc 和 h5 兩個場景下並不能共用，因為相同的元件名可能需要開發兩套元件來解決場景問題。但是對於設定表來說，應該要做到一致性。設定一個元件的設定表，要能夠支援多個場景的使用。

通過類似的能力，可以通過 registerIcons、setLang、setPlatform 等來註冊圖示、國際化、平臺標識等等。

2、方法註冊

對於複雜的元件來說，可能會在內部呼叫特定的方法來達到元件的功能完整性。比如選址元件，我們需要不斷的呼叫介面，來獲取對應的下一層級的資料。

那麼就需要通過 wufengController.registerAction 來實現方法的註冊。

wufengController.registerAction("apiName", (params) => {
  return reqApiFunction(params).then((res) => {
    return res;
  });
});

通過上述的程式碼，我們定義了方法名，並將非同步方法進行註冊。最終我們只要保證非同步請求的資料回傳到元件內部能夠和內部邏輯對應得上即可。

所以，同一套元件支援在不同的框架中使用，因為我們提供了開放性的請求邏輯，將方法丟擲去給對應的研發人員編寫，解決了框架對於註冊器的影響。

這裡尤其要注意

很多場景下，我們引入了外部的元件進行註冊，但是往往忽略了元件內部需要用到的方法。在元件的使用中就回導致報錯。

因此，在執行元件的某個方法邏輯報錯時，我們不妨在瀏覽器的控制檯上列印下 window.wufengController。看看 actions 是否有被註冊的方法。

三、原始碼解析

鋪墊了這麼多，無非是希望小夥伴們在原始碼解析前能夠了解到一定的前提知識。所以接下來才是我們的重點分析。

1、建立

既然是全域性的註冊器，那麼肯定是要在專案啟動時(或者可以理解為原始碼自動在全域性引入)。

因此，最重要的我們要建立一個建構函式，並範例化一個物件提供給開發者，來支援註冊器的能力。

export class WuFeng {
  constructor() {}
}
let wufeng: WuFeng;
wufeng = new WuFeng();
window.wufengController = wufeng;
export { wufeng as wufengController };

2、單例模式

我們肯定是希望在全域性變數裡有且只有一個範例化出來的 wufengController。但是我們並不能阻止它範例化多個物件。最好的辦法就是讓類自身負責，保持它的唯一範例。

那怎麼實現單例模式？

並不複雜。用一個變數來快取一個類範例化生成的物件，然後用這個變數來判斷一個類是否是否已經被範例化過。如果變數有值，則在下一次要獲取該類生成範例化物件時，直接返回之前的變數即可。

簡而言之：沒有就 new 一個出來，如果已經有了還 new，就直接返回之前已經 new 過的變數。

export class WuFeng {
  constructor() {
    if (WuFeng.singletonInstance) {
      return WuFeng.singletonInstance;
    }
  }
  static singletonInstance: WuFeng;
}
let wufeng: WuFeng;
if ((window as any).wufengController) {
  wufeng = (window as any).wufengController;
} else {
  wufeng = new WuFeng();
}
WuFeng.singletonInstance = wufeng;
window.wufengController = wufeng;
export { wufeng as wufengController };

這裡在建立完 wufeng 的範例化物件後，就將這個物件賦給靜態值 singletonInstance。而在建構函式初始化時會判斷 singletonInstance，如果有值，則直接返回，不再重新構造。

3、公有屬性

接下來就是就是定義類中的公有成員(屬性)。這裡的成員都會配套上兩個方法。

set 方法：允許使用者從外部將資料儲存到成員中。
get 方法：允許使用者獲取內部的成員資料。

比如 actions 這個物件，使用者存放使用者設定給內部元件使用的方法。會有 registerAction 和 getAction 的方法。

export class WuFeng {
  ...// 忽略部分程式碼
   // 所有需要翻譯的標籤
  public actions: any = {};
  // 執行時註冊，可以簡化設定，不用理會編輯器設定
  public registerAction(type: string, action?: (params?: any) => Promise<any>) {
    if (this.actions[type]) {
      console.log(`事件 [ ${type} ] 已存在，已被在此覆蓋註冊，請確認n`);
    }
    this.actions[type] = action;
    return null;
  }
  // 獲取存在的事件
  public getAction(type: string, params?: any): Promise<any> {
    if (!this.actions[type]) {
      console.warn(`事件 [ ${type} ] 未找到，請檢查您的<事件>註冊函數n`);
      return new Promise((resolve) => {
        resolve(null);
      });
    }
    return new Promise((resolve) => {
      this.actions[type](params).then(
        (res: any) => {
          resolve(res);
        },
        (error: any) => {
          console.warn(error);
          // TODO: 底層 reject 資料是否透傳到頂層？
          resolve(null);
        },
      );
    });
  }
}

剩下的物件，比如元件、圖示、監聽事件等，也和上大同小異。

4、設定表

對於元件來說，最重要的還是設定表，相同的元件程式碼，不同的設定可能帶來不同的效果。為了避免相似元件二次開發的浪費，我們將設定表開放給開發者來設定，提供了元件的複用性。

而 class 中定義的 components 也做了清晰的型別定義。

在原始碼 src/types.ts 中，清晰的看到元件設定表的 api。

5、完善

羅馬不是一天建成的。註冊器的庫最開始並沒有具備如此豐富的能力。有了基礎的能力後，都是在業務的驅動下不斷的完善註冊器的能力以支撐繁雜的需求。

就拿註冊器來說。無鋒零程式碼平臺一開始對標的是完善的表單能力。而後續針對表單資料的統計，我們衍生出了具備篩選能力的儀表盤模組。篩選模組和儀表盤元件本身不具備通訊的能力。為了實現這個能力，才增加 public subscriptions = {}; 的成員，並提供 useSubscription、emit 來實現註冊和通知的方法。

四、結束語

@wufengteam/core 統一中心註冊器對於小夥伴們可能無法在日常業務中使用到，且這個註冊器對於外部公司亦或者是不同的專案組來說使用的意義並不大。但是整體結構和倉庫作者在開發時的思路確是有值得我們參考和借鑑的地方。本篇文章通過原始碼解析的模組是希望讀者能夠通過對原始碼和場景的理解而複用到相似場景中去。

以上就是wufengteam core統一中心註冊器功能解析的詳細內容，更多關於wufengteam core統一中心註冊器的資料請關注it145.com其它相關文章！