一、功能解析

統(tǒng)一中心注冊器，顧名思義可以理解為將需要具備的資產(chǎn)匯總到統(tǒng)一的地方實(shí)現(xiàn)實(shí)現(xiàn)管控。并且能夠做到資產(chǎn)的統(tǒng)一性、完整性和可配置性。

這里的資產(chǎn)指的是組件、圖標(biāo)、方法、配置等可支持統(tǒng)一管控的東西。

拿我們之前做產(chǎn)品預(yù)演的一個(gè) demo "無鋒零代碼平臺(tái)"來舉個(gè)例子。

零代碼平臺(tái)最基礎(chǔ)的就是要提供可拖拽配置的組件。因?yàn)樽龅氖瞧脚_(tái)，所以我們要盡可能的支持讓外部的資產(chǎn)適配我們的平臺(tái)，且要保證統(tǒng)一的規(guī)則。那么如何做到統(tǒng)一和開放的平衡就變得尤為重要。

二、使用場景

1、組件注冊

通過 import { wufengController } from '@wufengteam/core'; 來引出統(tǒng)一中心注冊器的主角。

當(dāng)用戶開發(fā)完自定義的組件，就可以通過以下的配置將組件注冊進(jìn)去。

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

從上述的代碼中我們可以看出這個(gè)注冊組件的能力需要傳入三個(gè)參數(shù)。首先是開發(fā)人員研發(fā)的定制組件。

其次是該組件的配置表，比如：組件對應(yīng)的圖標(biāo)、組件的名稱、所在分組、傳入的默認(rèn)參數(shù)、樣式編輯器等配置。這里會(huì)在下個(gè)部分：源碼解析中來分析。這里只需要了解一個(gè)大致的能力即可。

那么最后就是組件對應(yīng)的設(shè)備，分為 pc 和 h5 兩個(gè)參數(shù)，來區(qū)分 pc 端和移動(dòng)端的網(wǎng)頁。

很多組件在 pc 和 h5 兩個(gè)場景下并不能共用，因?yàn)橄嗤慕M件名可能需要開發(fā)兩套組件來解決場景問題。但是對于配置表來說，應(yīng)該要做到一致性。配置一個(gè)組件的配置表，要能夠支持多個(gè)場景的使用。

通過類似的能力，可以通過 registerIcons、setLang、setPlatform 等來注冊圖標(biāo)、國際化、平臺(tái)標(biāo)識(shí)等等。

2、方法注冊

對于復(fù)雜的組件來說，可能會(huì)在內(nèi)部調(diào)用特定的方法來達(dá)到組件的功能完整性。比如選址組件，我們需要不斷的調(diào)用接口，來獲取對應(yīng)的下一層級的數(shù)據(jù)。

那么就需要通過 wufengController.registerAction 來實(shí)現(xiàn)方法的注冊。

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

通過上述的代碼，我們定義了方法名，并將異步方法進(jìn)行注冊。最終我們只要保證異步請求的數(shù)據(jù)回傳到組件內(nèi)部能夠和內(nèi)部邏輯對應(yīng)得上即可。

所以，同一套組件支持在不同的框架中使用，因?yàn)槲覀兲峁┝碎_放性的請求邏輯，將方法拋出去給對應(yīng)的研發(fā)人員編寫，解決了框架對于注冊器的影響。

這里尤其要注意

很多場景下，我們引入了外部的組件進(jìn)行注冊，但是往往忽略了組件內(nèi)部需要用到的方法。在組件的使用中就回導(dǎo)致報(bào)錯(cuò)。

因此，在執(zhí)行組件的某個(gè)方法邏輯報(bào)錯(cuò)時(shí)，我們不妨在瀏覽器的控制臺(tái)上打印下 window.wufengController。看看 actions 是否有被注冊的方法。

三、源碼解析

鋪墊了這么多，無非是希望小伙伴們在源碼解析前能夠了解到一定的前提知識(shí)。所以接下來才是我們的重點(diǎn)分析。

1、創(chuàng)建

既然是全局的注冊器，那么肯定是要在項(xiàng)目啟動(dòng)時(shí)(或者可以理解為源碼自動(dòng)在全局引入)。

因此，最重要的我們要?jiǎng)?chuàng)建一個(gè)構(gòu)造函數(shù)，并實(shí)例化一個(gè)對象提供給開發(fā)者，來支持注冊器的能力。

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

2、單例模式

我們肯定是希望在全局變量里有且只有一個(gè)實(shí)例化出來的 wufengController。但是我們并不能阻止它實(shí)例化多個(gè)對象。最好的辦法就是讓類自身負(fù)責(zé)，保持它的唯一實(shí)例。

那怎么實(shí)現(xiàn)單例模式？

并不復(fù)雜。用一個(gè)變量來緩存一個(gè)類實(shí)例化生成的對象，然后用這個(gè)變量來判斷一個(gè)類是否是否已經(jīng)被實(shí)例化過。如果變量有值，則在下一次要獲取該類生成實(shí)例化對象時(shí)，直接返回之前的變量即可。

簡而言之：沒有就 new 一個(gè)出來，如果已經(jīng)有了還 new，就直接返回之前已經(jīng) 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 };

這里在創(chuàng)建完 wufeng 的實(shí)例化對象后，就將這個(gè)對象賦給靜態(tài)值 singletonInstance。而在構(gòu)造函數(shù)初始化時(shí)會(huì)判斷 singletonInstance，如果有值，則直接返回，不再重新構(gòu)造。

3、公有屬性

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

• set 方法：允許用戶從外部將數(shù)據(jù)保存到成員中。
• get 方法：允許用戶獲取內(nèi)部的成員數(shù)據(jù)。

比如 actions 這個(gè)對象，用戶存放用戶配置給內(nèi)部組件使用的方法。會(huì)有 registerAction 和 getAction 的方法。

export class WuFeng {
  ...// 忽略部分代碼
   // 所有需要翻譯的標(biāo)簽
  public actions: any = {};
  // 運(yùn)行時(shí)注冊，可以簡化配置，不用理會(huì)編輯器配置
  public registerAction(type: string, action?: (params?: any) => Promise<any>) {
    if (this.actions[type]) {
      console.log(`事件 [ ${type} ] 已存在，已被在此覆蓋注冊，請確認(rèn)\n`);
    }
    this.actions[type] = action;
    return null;
  }
  // 獲取存在的事件
  public getAction(type: string, params?: any): Promise<any> {
    if (!this.actions[type]) {
      console.warn(`事件 [ ${type} ] 未找到，請檢查您的<事件>注冊函數(shù)\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 數(shù)據(jù)是否透傳到頂層？
          resolve(null);
        },
      );
    });
  }
}

剩下的對象，比如組件、圖標(biāo)、監(jiān)聽事件等，也和上大同小異。

4、配置表

對于組件來說，最重要的還是配置表，相同的組件代碼，不同的配置可能帶來不同的效果。為了避免相似組件二次開發(fā)的浪費(fèi)，我們將配置表開放給開發(fā)者來配置，提供了組件的復(fù)用性。

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

在源碼 src/types.ts 中，清晰的看到組件配置表的 api。

5、完善

羅馬不是一天建成的。注冊器的庫最開始并沒有具備如此豐富的能力。有了基礎(chǔ)的能力后，都是在業(yè)務(wù)的驅(qū)動(dòng)下不斷的完善注冊器的能力以支撐繁雜的需求。

就拿注冊器來說。無鋒零代碼平臺(tái)一開始對標(biāo)的是完善的表單能力。而后續(xù)針對表單數(shù)據(jù)的統(tǒng)計(jì)，我們衍生出了具備篩選能力的儀表盤模塊。篩選模塊和儀表盤組件本身不具備通信的能力。為了實(shí)現(xiàn)這個(gè)能力，才增加 public subscriptions = {}; 的成員，并提供 useSubscription、emit 來實(shí)現(xiàn)注冊和通知的方法。

四、結(jié)束語

@wufengteam/core 統(tǒng)一中心注冊器對于小伙伴們可能無法在日常業(yè)務(wù)中使用到，且這個(gè)注冊器對于外部公司亦或者是不同的項(xiàng)目組來說使用的意義并不大。但是整體結(jié)構(gòu)和倉庫作者在開發(fā)時(shí)的思路確是有值得我們參考和借鑒的地方。本篇文章通過源碼解析的模塊是希望讀者能夠通過對源碼和場景的理解而復(fù)用到相似場景中去。

以上就是wufengteam core統(tǒng)一中心注冊器功能解析的詳細(xì)內(nèi)容，更多關(guān)于wufengteam core統(tǒng)一中心注冊器的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論