在前端开发中，往往会遇到需要定制化网站样式或品牌的需求，而 white-label-mediator 就是一款 npm 包，可以方便地实现网站的二次定制。
什么是 white-label-mediator?
white-label-mediator 是一款使用 TypeScript 编写的 npm 包，它提供了一组 API，可以用于在多个品牌之间切换和维护。
使用 white-label-mediator，你可以在不改变应用程序代码的情况下，轻松地实现品牌颜色、文字或图标等元素的定制和替换。
安装 white-label-mediator
在使用 white-label-mediator 之前，你需要在本地安装它。使用 npm 可以很容易安装，在终端中输入以下命令即可：
npm install white-label-mediator --save
how to use
基本使用方法
- 初始化：
在你的程序入口处初始化 white-label-mediator。你需要提供一个配置对象，包含了不同品牌的相关信息。
-- -------------------- ---- -------
------ - ------------------- ------------ ----------------- - ---- -----------------------
----- ----------------- ----------------- - -
------------- ----------
------- -
-
----- ----------
------- -
-------- ----------
---------- ---------
-
--
-
----- ----------
------- -
-------- ----------
---------- ---------
-
-
-
--
--------------------------------------------上面代码中，defaultBrand 表示默认的品牌，brands 表示品牌的配置数组。每个品牌都应该有一个唯一的名称，以及颜色等自定义属性。
- 获取当前品牌：
你可以使用 WhiteLabelMediator.currentBrandName 直接获取当前品牌的名称。
console.log(WhiteLabelMediator.currentBrandName); // 'brand-a'
- 切换品牌：
如果需要切换品牌，只需要调用 WhiteLabelMediator.switchBrand 方法即可。该方法会自动更新品牌的配置信息。
WhiteLabelMediator.switchBrand('brand-b');
console.log(WhiteLabelMediator.currentBrandName); // 'brand-b'TypeScript 类型定义
white-label-mediator 提供了一些用于类型定义的接口，以便在代码中获得更好的启发和自动补全。
以下是一些重要的接口定义：
-- -------------------- ---- -------
--------- ----------- -
----- -------
-------- -
--------- -------
----------- -------
---------- -------
--
-- --- -----------
-
--------- ----------------- -
------------- -------
------- --------------
-
--------- ------------------- -
------------ ----------- ------- -- -----
----------------- -------
---------------- -- -- ------------
------- -------- ------------------ -- -----
-示例
以下是一个示例，它将展示如何使用 white-label-mediator 来定制网站品牌。
-- -------------------- ---- -------
------ - ------------------- ------------ ----------------- - ---- -----------------------
----- ------- ----------- - -
----- ------ ---
------- -
-------- ----------
---------- ---------
-
--
----- ------- ----------- - -
----- ------ ---
------- -
-------- ----------
---------- ---------
-
--
----- ----------------- ----------------- - -
------------- ------ ---
------- -------- -------
--
-- --- ------------------
--------------------------------------------
-- ------
------------------------------------------------- -- ----- -
-- ----
------------------------------------- ----
-- ------
------------------------------------------------- -- ----- -在上面的示例中，我们创建了两个品牌：Brand A 和 Brand B。我们使用 WhiteLabelMediator.config() 方法来配置品牌，并使用 WhiteLabelMediator.switchBrand() 方法来切换品牌。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdee2