简介
adonis-bem-xjst-provider 是一款适用于 Node.js 的 npm 包，它提供了一种便捷的方式来渲染复杂的 HTML 结构，并使用 BEM（块、元素、修饰符）命名约定。
通过 adonis-bem-xjst-provider，可以使用 XJST 模板语言来定义 BEM 的结构和样式，并借助 AdonisJS 服务端框架来实例化和管理这些组件。
本文将介绍如何在 AdonisJS 项目中使用 adonis-bem-xjst-provider，并提供一些示例代码和最佳实践。
安装
可以使用 npm 在项目中安装 adonis-bem-xjst-provider。
npm install adonis-bem-xjst-provider
配置
在 AdonisJS 项目中，我们需要在 start/app.js 文件中注册 adonis-bem-xjst-provider 提供的服务。
const providers = [ 'adonis-bem-xjst-provider/providers/BemProvider' ]
然后，我们需要在 .env 文件中配置 adonis-bem-xjst-provider 的选项。
BEM_APP_NAMESPACE=App BEM_XJST_USE_CACHE=false BEM_XJST_CACHE_TTL=300000
其中：
BEM_APP_NAMESPACE：应用的根命名空间，将用于生成组件的唯一 ID。BEM_XJST_USE_CACHE：是否启用缓存来优化模板解析性能。BEM_XJST_CACHE_TTL：缓存的 TTL（过期时间），单位毫秒。默认为 300000（5 分钟）。
使用
定义样式
在 adonis-bem-xjst-provider 中，样式采用 postcss-bem 插件来生成 CSS。
首先，我们需要在 start/app.js 文件中配置 postcss-bem 插件。
-- -------------------- ---- -------
----- --- - ------------------------
----- ---------- - ----------------------
-- ---
----------------------- ----- ------ -------- -- -
----- --------- - ---------
------------
------ ------
----------- -
----------- -----
--------- -----
--
---------- -
---------- ----
--------- ----
----------- ---
--
--------- -
------------------ -----
------------------- ----
-
--
--
-- ---
--
-- ---在 start/app.js 文件中，我们可以定义 BEM 的结构和样式。
-- -------------------- ---- -------
----- - --------- - - -------------------------------
------------------------------- -
---- ---------
----- -
----- ----- ---- -----
------ ----------- ------------ ---------
--
-------- -
----- ------
--
------- -
--------- -----
-
--
------------------------------ ------- -
---- ------
--
---------------------------------- ------- ----- ----- -- -
------ - ------------ ---- -
--
---------------------------------- -------- ----- ------ -- -
----- ------ - -
---------- ----------
------------ ----------
--------- ----------
-
------ - ------ - ---------------- ------------- - -
--
------------------------------- ----------- ----- ------ -- -
------ - --------- ----- -
--以上代码定义了一个名为 button 的组件，它具有 size 和 color 两个属性，以及一个 disabled 状态。它还定义了一个名为 text 的子元素。
渲染组件
在渲染组件之前，我们需要确保 adonis-bem-xjst-provider 的服务已经被实例化。
-- -------------------- ---- -------
----- --- - -------------------------------
-- ---
----- ------------ -
----- ----- -- ---- -- -
----- ---- - -
------ ------- --------
------- -
----- ------ -----
------ ----------
----- ----
--------- -----
-
-
----- ---- - ----- -------------------- ------------
------ -------------------- - ------ ----------- ---- --
-
-以上代码将在 MyController 中使用 BEM.render() 方法渲染 button 组件，方法的第一个参数为组件名称，第二个参数为数据对象。
渲染完成后，我们将 HTML 字符串传递到视图模板中，让模板引擎负责渲染最终的 HTML 内容。
示例代码
以下是一个完整的示例代码，它演示了如何在 AdonisJS 项目中使用 adonis-bem-xjst-provider 渲染 BEM 组件。
-- -------------------- ---- -------
----- - --------------- - - -------------------------
----- ------- - ------------------
----- ---------- - ----------------------
----- ---- - ---------------
----- --- - -------------------
----- --------- - -- ------- ---------- ----------- ------ -- -- -
----- -------- - -------------------- -
--------- ----------
--
----- ------- - -
-------
-----------------
-
------ ---------------------------------
-
----- ----------- ------- --------------- -
-------- -- -
-- ----------- --- --------
-
---- -- -
-- ------ --- ------- --------- --- ---------
----- - --------- - - -------------------------------
------------------------------- -
---- ---------
----- -
----- ----- ---- -----
------ ----------- ------------ ---------
--
-------- -
----- ------
--
------- -
--------- -----
-
--
------------------------------ ------- -
---- ------
--
---------------------------------- ------- ----- ----- -- -
------ - ------------ ---- -
--
---------------------------------- -------- ----- ------ -- -
----- ------ - -
---------- ----------
------------ ----------
--------- ----------
-
------ - ------ - ---------------- ------------- - -
--
------------------------------- ----------- ----- ------ -- -
------ - --------- ----- -
--
-
----- ----- -- -
----- --- - -------------------------------
-- -------- ------------ ------- -- ------- ---- -----
----- - --- - - ------------------------
---------------------------- ----- ------ - ------ -- -- -
----- --------- - -----------------------------------
----- ---- - --
----- ----------- - ------------------ ------------------
--- -
-- ---- ------ -----
----- ------- - ----- -------------------------------- -- --------------------------
-- ------- --- ------ ----- ------- -------
----- ---------- - -
--------
------------
------ ------
----------- -
----------- -----
--------- -----
--
---------- -
---------- ----
--------- ----
----------- ---
--
--------- -
------------------ -----
------------------- ----
-
--
-
-
--- ------- - ----- ------------------------------ -- --------------------- --- -- ----------- --------------------------
-- -------- --- ---- --------
----- --- - -
--------
---------- -----------------
----------- ------------------
------------ --------------- -- -- ----------------
------ -------------------- --- -------------
-
----- ------ - ----- -- -- -------------------- -
-------
-------
--
----- ------ - ----- --------
---------------------------------
- ----- --- -
-------------------- --------------
-
--
-
-------- -- -
------ ----------------------------------------
-
-
-------------- - -----------结论
adonis-bem-xjst-provider 是一款非常实用的 npm 包，它可以帮助我们快速、高效地创建和管理复杂的 HTML 页面和组件。通过这篇文章，你学会了如何在 AdonisJS 项目中使用 adonis-bem-xjst-provider，以及一些最佳实践和使用技巧。希望能够对你的前端开发工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672673660cf7123b36574