将框架组件化

我相信你们大多数人都了解如何使用 Bootstrap、Foundation 或 Materialize 等框架。您使用它们的 CSS 和 JavaScript。您还可以使用它们的 HTML 片段，根据需要将它们组合在一起并应用类来完成您需要做的事情。

您需要自己将 HTML 拼凑在一起。这很好，因为它很灵活。人们在各种 CMS 和后端系统中都使用这样的框架。但是，如果您想为此应用一些结构，从框架中给您的组件中创建实际的组件，该怎么办？

这正是 Morgan Feeney 在去年 使用 Nunjucks 和 Grunt 的组件驱动设计模式 中所做的。

例如，Bootstrap 为您提供了一些 警报消息 的 HTML，如下所示：

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

我们可以通过以下方式将其抽象成可重用的组件

1. 传入警报的类型（第二个类的后半部分）
2. 传入警报内的内容

我相信您可以想象在您选择的后台或模板语言中执行此操作。一个单一的 PHP 文件，您在其中设置代表这些事物的变量，然后 include 它。一个 Rails 部分，您向其中传递 locals。一个在 JSX 中传递内容作为 props 的字面 React 组件。这种做法使这些模式更容易重用。

Morgan 使用 Nunjucks 做到了这一点

{% macro alert(class="success", text="<strong>Well done!</strong> You successfully read this important alert message.") %}
  <div class="alert alert-{{ class }}" role="alert">
    {{ text | safe }}
  </div>
{% endmacro %}

我认为这非常引人注目，并且随着设计系统越来越成为 一种标准实践，我们将越来越多地这样做。

我还认为 Nunjucks 非常酷。

我将 Morgan 的想法（它已经是一个 仓库）移植到了 一个 CodePen 项目，如果您想在那里玩一下。