使用脚本标签作为模板系统

Question

** 修订 **

我做了这个基本的例子，我相信它可以证明 JavaScript 作为它自己的模板引擎可能很有用： http://jsfiddle.net/julienetienne/u6akrx7j/

<script>talk[0].text('Hello World!');</script>

这只是一个简单的示例，但您可以看到有很多可能性，例如。

• 不一定非要以这种方式检测标签节点，它可以按类、id 来检测。也可以获取函数的脚本节点，
• 您可以简单地打印变量，例如 p('Page Title');
• 元素的自闭合列表可能类似于例如li('', 菜单);
• 您可以像使用任何其他通用模板引擎一样清楚地构建其他复杂数据集。

在此编辑之前，我犯了将其与 PHP 进行比较的错误。我实际上正在考虑更多地替代例如车把、下划线、小胡子、灰尘等。

但在我兴奋之前，我真的很想知道以这种方式使用是否有任何问题。 （我不关心新手的最佳做法）。

有机模板系统的好处似乎很明显。最大的优点是无需学习语法，而且比看到 %{{foobar}}% 之类的标记更干净。

考虑到我的示例只是一个极简概念，请告诉我这样的系统与普通模板引擎相比的缺点。

谢谢

Answer 1

它看起来像是一个 PHP 风格的模板系统，但显然不是： 在小提琴中，脚本部分可以写在页面的任何地方。

定义要插入到 DOM 中的文本位置的部分由 var talk = document.getElementsByTagName('div'); 行和 HTML 的结构定义。

如果您使用的div 比已经存在的更多，则文本将出现在完全不同（并且可能是错误的）位置。

因此，您不能独立于底层标记使用系统。这使得它不同于 PHP 中的用例，您可以通过在标记中定义变量的位置来回显变量。

如果您正在寻找如何实现模板系统的方法，请查看 Angular 或类似的前端框架。