前言
white-label-js 是一个实现动态白标的 npm 包，可以在前端代码中快速实现多个客户的品牌切换，例如客户 A 的品牌颜色为红色，客户 B 的品牌颜色为蓝色，通过 white-label-js 包，我们可以在页面中动态切换这些品牌。
安装
通过 npm 安装 white-label-js：
npm install white-label-js
使用
在 html 文件中引入 white-label-js:
<script src="node_modules/white-label-js/dist/white-label.min.js"></script>
在 js 文件中初始化 white-label-js：
-- -------------------- ---- -------
---------
------ ----
-------- -
---- -
------------- ------
--
---- -
------------- ------
-
-
--使用 WL.init 进行初始化，brand 指定当前使用的品牌，options 是一个对象，表示不同品牌的属性配置，例如我们可以为客户 A 配置红色的主题颜色，为客户 B 配置蓝色的主题颜色。
white-label-js 还提供了一些 API 供我们动态改变品牌属性：
// 切换品牌到 A
WL.changeBrand('A')
// 修改主题颜色为绿色
WL.updateOptions('A', {
primaryColor: '#0F0'
})示例代码
下面是一个使用 white-label-js 实现动态切换颜色的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ----------
-------
------
---------- -----------
---- ------------------------
------ --------------------------------- --------------
------ ------------ -------------------------
------
------- -------------------------------------------------------------------
--------
---------
------ ----
-------- -
---- -
------------- ------
--
---- -
------------- ------
-
-
--
----- ----------------- - ----------------------------------------------
-------------------------------------------- ------- -- -
-- ------------
-------------------------- -
------------- ------------------
--
--
---------
-------
-------意义
动态白标是现代 web 应用中常见的功能，white-label-js 提供了一种简单而优雅的实现方式，提高了白标功能的可复用性和维护性。使用 white-label-js，我们可以快速地实现动态白标，为用户提供更好的品牌体验，提高产品和服务的可定制性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdee1