什么是 emery
emery 是一个基于 Web Component 标准开发的 UI 组件库，采用 React.js 技术栈开发的，它的目标是提供一套简单易用的组件库，方便前端工程师快速开发大型单页面应用或者中小型网站。
安装 emery
使用 npm 安装 emery 组件库非常简单，执行以下命令即可：
npm install emery
使用 emery
使用 emery 组件库需要将其注册为 Web Component，因此需要首先在应用程序的 HTML 模板中添加以下代码：
<script src="./node_modules/emery/dist/emery.js"></script>
然后在你的应用或模块中引入组件并进行注册：
-- -------------------- ---- -------
------ - ------------------- - ---- -------
----- ----------- ------- ----------- -
------------- -
-------
----- ------ - ------------------- ----- ------ --
----- ----- - -----------------------------
--------------- - ------ -------
-------------------------
-
-
-------------------------------- ---------------然后你就可以在你的应用程序中使用这个新的 Web Component 了：
<my-component></my-component>
快速了解逐步加载和异步模块定义 不同的浏览器提供了不同的方法来逐步加载和异步定义 Web Component，现在有两种不同的方法。第一种是通过 使用 script 标签，将 Web Component 打包成一种合适的方式。第二种是使用 customElements，定义并注册这个 Web Component 类。
对于第一种方式，你可以将组件打包成 JavaScript 文件，然后使用 script 标签引入它。这个组件文件应该导出一个默认的 Web Component 类，接受属性和元素标签作为参数。这个类应该使用 Shadow DOM 来创建一个封装后的组件。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
-------
----- ------ - ------------------- ----- ------ --
----- ----- - -----------------------------
--------------- - ------ -------
-------------------------
-
-
------------------------------------- ------------对于第二种方式，你可以使用 defineCustomElement 方法将 Web Component 类注册到 customElements 中：
-- -------------------- ---- -------
------ - ------------------- - ---- -------
----- ----------- ------- ----------- -
------------- -
-------
----- ------ - ------------------- ----- ------ --
----- ----- - -----------------------------
--------------- - ------ -------
-------------------------
-
-
-------------------------------- ---------------使用 emery 的好处
- 遵循 Web Component 标准，可以直接用在任意框架中
emery 组件库基于 Web Component 技术栈开发，支持任意框架或库。使用 emery 开发的组件可以直接使用在 vue.js 或者 Angular 中，这样可以大大减少前端工程师的学习成本。
- 提供了一套简单易用的组件库
emery 组件库提供了一套简单易用的组件库，包含常用的 UI 组件，如按钮、输入框、表格、分页、Dialog 等等，这样可以大大提高开发的效率。
- 高度可定制性
emery 组件库提供了非常高的可定制性，你可以根据你的需求对其进行扩展和定制，而不需要对组件进行修改。这使得 emery 组件库非常适合中小型网站和大型单页面应用的快速开发。
总结
emery 是一个基于 Web Component 标准开发的 UI 组件库，采用 React.js 技术栈开发的，它提供了非常简单易用的组件，方便前端工程师快速开发大型单页面应用或者中小型网站。使用 emery 组件库需要将其注册为 Web Component，同时还需要了解逐步加载和异步模块定义的不同方法。最重要的是，emery 组件库具有非常高的可定制性，可以满足各种前端开发场景的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb7e