对于前端开发者来说，Invision DSM 是一款非常优秀的产品设计协作平台。作为一名前端开发者，可以通过 Invision DSM 与设计团队进行紧密的协作，随时查看并更新产品的设计稿、色彩方案、图标库等等，非常方便。
但是，有时候我们需要在自己的项目中引用设计团队在 Invision DSM 平台中的一些样式，此时就需要用到 Invision DSM Style Renderer 这个 NPM 包。
本文将会介绍如何使用 Invision DSM Style Renderer 这个 NPM 包，以及该包的各项特性，帮助你更好地在项目中引用 Invision DSM 平台中的样式。
Invision DSM Style Renderer 是什么？
在 Invision DSM 中，样式是以设计系统的形式组织的。当设计系统中的样式被发布时，样式会被存储到 DSM 服务器上。Invision DSM Style Renderer 是一款用于呈现 DSM 中样式的 NPM 包。当你需要在项目中使用 DSM 样式时，可以使用 Invision DSM Style Renderer 来获取和呈现这些样式。
Invision DSM Style Renderer 的使用
为了使用 Invision DSM Style Renderer ，需要先安装该包：
--- ------- ---------------------------
在项目中使用 Invision DSM Style Renderer 的代码如下所示：
----- ------------------------ - --------------------------------------- ------------------------------- ------------ ------------------ ------- ------------ --- -- ---------------------------- ----- ---------- - ----------------------------------------------
这样，你就可以在你的项目中使用样式了！
Invision DSM Style Renderer 的特性
Invision DSM Style Renderer 中提供了一些非常有用的特性，可以为你在项目中使用 DSM 样式提供极大的帮助。
初始化用户会话
调用 invisionDSMStyleRenderer.init 方法，可以初始化创建一个用户会话。
------------------------------- ------------ ------------------ ------- ------------ ---
这个用户会话将被用来获取 DSM 中的样式。
获取样式
调用 invisionDSMStyleRenderer.get方法，可以获取 DSM 中的样式。
以下是获取 DSM 中字体样式的例子：
----- ---------- - ----------------------------------------------
通过获取到的 fontFamily 变量，可以在项目中使用 DSM 中的样式。
数据缓存
Invision DSM Style Renderer 缓存了获取的 DSM 样式和其它相关的数据。当重复调用获取 DSM 样式方法时，可以从缓存中快速获取数据。
版本控制
Invision DSM Style Renderer 可以获取指定版本的 DSM 样式。这可以用来解决在多个迭代版本之间的样式不同步的问题。
例如：
------------------------------- ------------ ------------------ ------- ------------- -------- ------- --- -- ---- ----- ---------- - ----------------------------------------------
自定义 DSM 样式
如果 DSM 中没有你所需的样式，你可以自定义一个 CSS 样式规则，然后用 invisionDSMStyleRenderer.setCustomCSS 方法将其添加到 DSM 中。
例如：
----------------------------------------------- ------------------ --------
这样，就可以在项目中使用自定义的样式了。
总结
通过 Invision DSM Style Renderer ，可以轻松地在你的项目中使用 DSM 样式，并获取到 DSM 中的样式和其它相关数据。Invision DSM Style Renderer 的特性非常丰富，自定义 DSM 样式也非常简单，相信这会为你在项目中使用 DSM 样式带来很大的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f0d9381d61a3540d79