moe教程_Moe-js-JavaScript的现代模板引擎

moe教程

我已经在Node.js应用程序中使用了很长时间，尽管它总是可以完成工作，但有时我觉得使用起来很尴尬。 我特别想念无法直接在模板中使用表达式和灵活的逻辑流程。

我知道有一个论点可以将逻辑和视图分开，并且视图应该是“无逻辑的”，但是有时您只想要更多的控制即可。 像Swag这样的图书馆的存在表明，我在这里并不孤单，所以我不得不思考...

具有与Handlerbars类似的语法JavaScript启用模板语言会是什么样？

最后，我想到了Moe-js：现代JavaScript模板引擎。

有关Moe-js的完整文档， 请参见此处 。 这篇文章解释了其背后的原理。

背景

Moe-js的最初动机来自于重写我自己的网站http://www.toptensoftware.com 。 该网站大部分是由一组纯文本文件驱动的静态内容-基本上是Markdown文件，顶部带有一些YAML“前题”，定义了与该页面相关的其他数据。

在这种情况下，我实际上是使用Express的视图引擎作为主题引擎，并且能够在视图中包含合理的逻辑分布，这意味着我可以完全消除中间的“业务逻辑”层。

我需要做的另一件事是模板能够加载引用页面的元数据。 例如：加载引用的页面以提取其标题，概要摘要或横幅图像的URL。 众所周知，在Node中同步执行此操作是不好的形式，因此我想要一个可以异步呈现模板的模板引擎。

设计目标

综合所有这些，我提出了以下设计目标：

• 句柄之类的语法
• 嵌入式JavaScript支持
• 编译速度快
• 启用异步
• 易扩展模型

句柄之类的语法

尽管我对Handlebars有所了解，但我还是非常喜欢这种语法-它易于理解，易于学习，易于键入并且可以将模板脚本与标记区分开来。

另外，我有很多使用Handlebars的项目，所以我想要一种易于转换为新模板引擎的语法。

如果您熟悉Handlebars，则Moe-js看起来会非常熟悉：

< h1 > {{model.title}} </ h1 >
{{#each item in model.items}}
    {{#if item.price != 0}}
        < p > {{item.name.toUpperCase()}} - {{{helpers.formatPrice(item.price)}}} </ p >
    {{/if}}
{{/each}}

嵌入式JavaScript支持

Moe-js支持JavaScript表达式。 在上面的示例中，请注意以下几点：

1. 调用JavaScript成员： item.name.toUpperCase()
2. JavaScript条件： item.price != 0
3. 辅助函数： helpers.formatPrice(...)

您还可以使用code指令嵌入整个代码块：

{{#code}}
function doSomething(value)
{
    ...
}
{{/code}}

{{doSomething(99)}}

编译速度快

为了简化和提高性能，Moe-js将模板编译为纯JavaScript。

为了避免在运行时进行动态查找，Moe-js要求显式引用所有数据属性。 为了说明，在Handlebars中，您可以仅按名称引用data属性：

< p > {{title}} </ p >

由于嵌入式JavaScript支持，因此无法在Moe-js中使用。 如果不完全分析和理解表达式，也不知道最终传递给模板的数据对象的属性，就无法知道“ title”属性的来源。 它可以是传递的数据对象的属性，局部变量，范围变量等。

因此，必须通过特殊模型属性显式引用数据属性：

< p > {{model.title}} </ p >

同样，在循环迭代器中，变量用于显式指定要使用的循环变量：

{{#each u in model.Users}}
{{#each r in u.roles}}< p > Name: {{u.name}} Role: {{r}} </ p >
{{/each}}
{{/each}}

尽管这使模板从Handlebars到Moe-js的转换比我想要的更繁琐，但最终它使编译更简单，渲染更快，并且我开始偏爱这种更明确的样式。

已启用异步

Moe-js模板可以编译为同步或异步执行。 异步编译的模板可以使用JavaScript await关键字：

< p > Data: {{await model.callSomeAsyncMethod()}} </ p >

如果您使用的是Moe-js的Express集成，则会自动启用异步支持。

易于扩展

Moe-js通过moe.helpers属性提供可扩展性。 假设您要使用辅助功能来格式化价格。 像这样添加帮助器：

moe.helpers.FormatPrice =function ( val )
 {
    if (val == 0 )
        return "-" ;
    else
        return "$" + val.toFixed( 2 );
}

然后在您的模板中调用它：

< p > Price: {{helpers.FormatPrice(item.price)}} </ p >

其他特性

Moe-js具有典型的模板引擎功能，包括：

• 支持局部和布局
• Express View Engine集成
• 将模板输出重定向到变量
• 编译模板缓存
• 没有依赖

看看这个

由于其内置JavaScript支持，因此不应将Moe-js用于不受信任来源的模板脚本。 即：您不应让您网站的用户上传模板以在您的服务器上执行。

但是，如果您为下一个Node / Express项目追求一个简单，易于使用，现代且启用了异步的视图引擎，那么这可能是个不错的选择，我鼓励您尝试一下 ， 让我知道您的想法。

InheritDoc.io

在每一篇文章中 ，我都想分享别人的项目，最近，我遇到了FireShark Studios的InheritDoc.io。

如果您正在编写C＃XML文档，则可能熟悉<inheritdoc />指令，某些文档生成器使用该指令从基类继承文档。

这种方法的麻烦在于，那些继承的声明在Visual Studio Intellisense中不可用。 FireShark的项目通过重写原始.XML文档文件（用实际继承的文档替换<inheritdoc />指令）来解决此问题。

此外，还对其进行了扩展，以允许从其他方法中提取文档，并且有一个不错的网站介绍了这一切的工作原理。

在这里查看： https : //www.inheritdoc.io

翻译自: https://hackernoon.com/moe-js-a-modern-template-engine-for-javascript-5mel3aro

moe教程