在前端开发中，使用第三方模块可以提升开发效率和质量。npm 是目前最受欢迎的 JavaScript 包管理器，拥有丰富的第三方模块资源。ember-macaroni 是一个减少 Ember 应用程序中模板代码的 npm 包，本文将详细介绍它的使用。
安装
使用 npm 安装 ember-macaroni：
npm install ember-macaroni
使用
首先，为了使用 ember-macaroni，需要将其添加到 Ember 应用程序中。
-- -------------------- ---- -------
-- ----------
------ ----------- ---- ---------------------
------ ------------------- ---- -----------------------------
------ ------- ----- -------- ------- ----------- -
------ -
-------------
---------------------------------
-
-接下来，在定义模板时使用 macaroni 标签。
<!-- app/templates/components/task-item.hbs -->
{{#macaroni 'task-item'}}
{{@item.title}}
{{@item.description}}
<button {{action "edit"}}>Edit</button>
{{/macaroni}}最后，在 app/components 目录下创建一个新组件并继承自 EmberMacaroniComponent，这个组件将包含刚刚建立的模板。
-- -------------------- ---- -------
-- ---------------------------
------ ---------------------- ---- ---------------------------
------ ------- ----- ----------------- ------- ---------------------- -
--- ----------- -
------ --------------- -- ------
-
--- -------------- -
--------------- - ----
------ ----------------
-
------ -
-------------- - -----
-
------ -
-------------- - ------
-
-------- -
-------------- - ------
-
-完成上述步骤后，就可以使用 app/components/task-item 组件显示 app/templates/task-item.hbs 模板了。
深度探讨
ember-macaroni 的核心是将组件的展示逻辑从组件代码中抽离出来，实现组件代码的重用。我们常常会为不同组件编写相似的模板代码，macaroni 标签将这些模板代码封装到了组件中，让我们可以轻松地复用它们。
通过使用 ember-macaroni，我们将减少组件代码的长度和复杂度。这使得组件更加易于理解，也更容易维护和测试。
同时，使用 ember-macaroni，我们可以将组件设计得更加灵活和可重用。macaroni 标签不仅可以用于组件内部，也可以在组件之间共享。这样，一个组件可以定义多个不同的展示方式，而不必修改组件的代码。
示例代码
为了更好地理解 ember-macaroni 的使用，下面给出一个 TodoList 应用程序的示例代码。
-- -------------------- ---- -------
-- ----------
------ ----------- ---- ---------------------
------ ------------------- ---- -----------------------------
------ ------- ----- -------- ------- ----------- -
------ -
-------------
---------------------------------
-
--- -------------------- ---- -------
---- -------------------------------------- ---
----------- -------------
---------------
----- -----------
------- -------------------
---------- -------------------------
------- -------- ----------------------
------- -------- --------------------------
--------
---------------------
------- -------- ----------------------
-------
--------------- -------------------- ---- -------
-- ---------------------------
------ ---------------------- ---- ---------------------------
------ ------- ----- ----------------- ------- ---------------------- -
--- ----------- -
------ --------------- -- ------
-
--- -------------- -
--------------- - ----
------ ----------------
-
------ -
-------------- - -----
-
------ -
-------------- - ------
-
-------- -
-------------- - ------
-
--- -------------------- ---- -------
-- ------------------------
------ ---------- ---- --------------------
------ ------- ----- --------------- ------- ---------- -
----- - -
- --- -- ------ ----- --- ------------ --- ---- --- --
- --- -- ------ ----- --- ------------ --- ---- --- --
--
-<!-- app/templates/tasks.hbs -->
{{#each tasks as |task|}}
<TaskItem @item={{task}} />
{{/each}}在上述示例应用程序中，每个 todo 项都有一个表单，用于编辑和保存该项。可以通过单击编辑按钮来打开和关闭表单。运行应用程序后，可以看到一个包含所有待办事项的任务列表，每个待办事项右侧都有一个按钮可以单击以编辑任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ca563576b7b1ecc7f