2

我最近一直想知道是否有可能使用与 Twig 具有“相同”语法的模板系统进行客户端模板，以及它与 Twig 的集成。找到Swig，这似乎是“JavaScript 的 Twig”。

使用相同的语法可能有几个好处：

  • 无需学习另一种语法，
  • 可移植模板：同一块可用于前端和/或后端模板，具体取决于架构。
  • 你给它命名...

但是，会出现一些挑战：

  • 我需要一种机制来定义模板中的哪些标签/块/部分专用于前端解析。标签可以完成工作，{% raw %}但是...
  • 针对可移植模板将代表非常精细的块以及“包含为原始”的可能性。例如：我想在<head>我的主 HTML 文件中收集我希望前端模板引擎可用的所有块，每个块都包含在一个<script>标签中。所以我需要“原始包含”这些块。

是否有人将 Twig 与 Swig 或任何其他 javascript 模板系统结合使用，其语法与 Twig 的语法有些冲突？您将如何管理/组织您的模板，以便您也可以/仅在前端轻松使用模板？

4

1 回答 1

0

免责声明：这是对一个开放问题的开放答案，请记住这一点。我正在分享我的经验，因为没有简单、单一的方式来回答这个问题。

我是一名前端 Web 开发人员，与 symfony 人员密切合作。过去，我们一起使用树枝和小胡子模板。需要 ajax 调用的任何地方都可以复制 Mustache 模板。很明显，这是一个巨大的维护开销。

我将我的答案分为两个部分，分别解决两个不同的问题；构造模板以使它们易于前端，并添加 twig 的 javascript 实现。

模板结构

我们朝着逻辑组织模板迈出的第一步是将它们划分为页面级模板、功能模板和演示模板。

页面级模板是为应用内容定义通用容器的模板。考虑到：

  • 用户未经授权
  • 用户授权
  • 电子邮件

功能模板只是更深一步。它们是用于构建整个页面的预制件。通常它们是来自后端的数据被放入的地方。例如，考虑一个容器中的用户列表。功能模板是容器，其中包括演示模板，将数据传递给它。

演示模板只是没有逻辑（没有数据转换）的组件，旨在提供数据。这个组件可以嵌套。（Fe Button和title都包含在CTA组件中）。展示组件是我们构建块中最细的颗粒。

以这种方式组织代码花费了很多时间，但让我们能够清楚地区分必须能够前端渲染的组件和逻辑繁重的组件。

Twig.js

下一步是集成（如其中一个评论中所建议的）twig.js。

我想在我的主 HTML 文件中收集我希望前端模板引擎可用的所有块，每个块都包含在一个标签中。所以我需要“原始包含”这些块。

使用 twig.js，您无需担心模板可用于前端。您可以只提供 url，如果模板扩展或包含一些其他模板，则将异步加载。因此，使用 json 数据提供的 twig 模板由 javascript 呈现，并且不需要额外的模板引擎。

我从未运行过任何性能测试。虽然我可以想象 twig.js 比 mustache 慢得多，但在 twig.js 中仅渲染无逻辑组件可以大大提高性能。

如果我没有解决任何问题，请告诉我。我渴望进一步讨论这个话题。

于 2017-11-30T19:32:23.820 回答