前言
随着现代 Web 开发的发展，组件化思想越来越被广泛应用。而 Web Components 则是一个用于描述可重用组件的框架。Web Components 允许我们创建自定义 HTML 标签，具有封装性、复用性、可维护性和跨平台等优点。这样我们就可以构建 W3C 标准规范且可拓展的应用程序，这也是所有现代应用程序都必须具备的技术之一。
而在使用 fluent-ui 这个优秀的组件库时，可能会发现其中并没有特定的组件能够满足自己的需求，那么是否需要从零开始构建一个组件呢？其实不需要，使用 Web Components 就可以自定义 fluent-ui 的组件，符合自己的业务和特定需求。
那么本文就来介绍一下如何基于 StencilJS 构建 Web Components，来解决 fluent-ui 中自定义组件的使用问题。
StencilJS 简介
StencilJS 是一种 Web Components 构建工具，它能够生成 Web Components，以及自定义标签的语法，同时还能够创建原生应用程序。StencilJS 是由 Ionic 团队创建的，Ionic 团队是一个在开源社区极富盛名的开发者团队，并且早在 2012 年就开始为 HTML5、Angular、Ionic 等项目做出了巨大贡献。
StencilJS 的优点：
- 快速：Stencil 使用静态分析器，这使得它比 React 和 Angular 更快速、更高效。
- 跨框架：Stencil 支持 React、Vue、Angular、Ember 和纯 JavaScript 项目，并能够从 JSX、Pug 和 TypeScript 转换到自定义元素。
- 构建 Web Components：Stencil 能够为你创建具有标准 Web API 的 Web Components。
- 快速反应：Stencil 能够将页面的响应速度提升两倍以上。
- 注重性能：Stencil 的代码尺寸很小，不到 4KB，并且不需要额外的类库支持。
创建一个基本 StencilJS 的组件
安装 StencilJS
StemcilJS 能通过 npm 来进行安装。在默认情况下，它安装的是 StencilJS 的 CLI（Command Line Interface）工具。使用 CLI 工具能够快速创建新的项目，并处理打包和编译工作。
--- - -------------
构建一个组件
在建立组件之前，需要先创建一个项目。现在就可以使用 stencil 命令创建一个新的项目。
------- ------ ----------- -- ----------- --- -----
现在，Stemcil 在 localhost:3333 端口上运行一个简单的例子。
在初始化好项目后，可以通过 CLI 工具创建一个组件。
--- --- --------
这将会询问你一些问题，并在计算机上创建一个简单的组件。这将会创建一个 <my-component> 元素，并包括一些简单的 demo 代码。在 CLI 工具中，需要配置组件的属性和方法，并能且 Stencil 在缺省情况下为我们生成了一份带有样例的代码。
在组件中使用 fluent-ui
在组件中使用 fluent-ui，需要先安装依赖：
--- - --------------- --------------------- ------
在组件中，添加以下的引用。
------ - ---------- - - ---- ---------------- ------ - --------- - ---- ------------------------ ------ - ------------- - ---- ------------------
在 render 方法中，我们可以使用 fluent-ui 开发者规范中的 Button。
-------- -
----- ----------- - -----------
-------- -- -- -
------------------ ---------
--
---
------ -
-----
-------------- ---------------- ----------- ------ --
------
--
-这将会在我们的组件中显示一个 Button。
测试我们的组件
最后，让我们测试一下我们的自定义 fluent-ui 的组件。将组件添加到 index.html 中。
--------- -----
------
------
-------------- --------- ---------------
------- -----------------------------------------
--------
--------- -- -
--- ------ - ---------------------------------
---------- - -------------------------------------------------------------------------
------------- - -------- -- -
-- ----- --- ------- --------- -- ---- ----- --- --- ---------- --- ------- -
--- ------ - ---------------------------------
----------- - ---------
---------- - ----------------------------
------------- - -------- -- -
-- ---- ---------- ------ - ------- ---- ---- -- -----------
---------------------------------------- - -
-----------------------------
--
--
----------------------------------
--
----------------------------------
-----
---------
-------
------
---- ---------------
-------
-------现在，打开浏览器，你应该能够看到一个应用了 fluent-ui Button 的自定义组件。
结论
本文介绍了如何使用 StencilJS 来构建 Web Components，并在其中使用 fluent-ui 组件。Web Components 提供了一种强大的方式来自定义组件，并且享有 Web 开发领域中的诸多优势。StencilJS 赋予我们一种灵活、跨框架的方式来开发 Web Components，这样我们就可以在自己的项目中使用 fluent-ui 所提供的所有组建，并通过 Web Components 来自定义和扩展这些组件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672b1f79ddd3a70eb6d1c35d