HTML 预处理器

本文将解释 HTML 预处理器，并概述 HTML 预处理器的使用。HTML 预处理器及其名称出现在 html 页面上。它是整个编译过程的初始步骤，包括头文件包含、宏展开和注释删除。有时，编写 HTML 和 CSS 需要我们重复执行某项特定活动，结果表明效率低下。HTML 预处理器可以解决这些问题。

预处理器是一种程序，它接收一种格式的输入并将其转换为另一种格式，通常是 HTML 和 CSS。它旨在无缝集成新功能与现有功能，而不会损害浏览器兼容性。

以下是添加预处理器的理由

• 根据 DRY 原则，我们可以重用相同的代码块而无需编写或重复编写代码。DRY 原则的缩写是“Don't Repeat Yourself”（不要重复自己）。
• 大型代码将使网页更易于维护。
• 有助于我们正确组织代码，并减少开发所花费的总时间。

常用 HTML 预处理器

HTML 预处理器与 HTML 语言类似，但有一些语法差异。以下是一些最受欢迎的 HTML 预处理器及其详细信息。

• Pug
• Haml
• Slim
• Handlebars
• Nunjucks

Pug 预处理器

Pug，以前称为 Jade 处理器，是一种预处理器，可以更轻松地创建长 HTML 代码。它提供了大量功能，例如条件语句、循环、混合、JavaScript 对象和模板。

好处

• 简洁的语法：Jade 因其精简的语法而脱颖而出，原因有很多。
• JavaScript 详细选择器库、样式表和模板都是常量，因为元素是使用 CSS 选择器语法创建的。
• 可重用性：Scala、PHP、Ruby、Python、JavaScript 和 Java 都可以与 Jade 模板配合使用。

缺点

• 缩进决定结构。这样，缩进错误将破坏结果；通常，查找错误需要时间和精力。
• 在团队协作编码时很容易出现书写问题。当每个人都使用不同的缩进样式进行编码时，很难复制粘贴或重新排列代码。

示例

示例显示了 pug 代码和 html 代码。pug 不需要开始和结束标签，但它与 html 语言没有太大区别。

示例 1

示例显示了基本的 pug 和 html 代码模板。我们可以看到 html 和 pug 预处理器的代码与输出相同。

• Pug 代码模板： 语法中显示了简单的表达式。

• html 代码模板

输出

图像显示了预处理器的输出。

示例 2

示例显示了带有 CSS 的基本 pug 和 html 代码模板。我们可以看到 HTML 和 Pug 预处理器的代码以及设计、颜色和背景色的输出相同。

• Pug 代码模板： 语法中显示了带有样式属性的简单表达式。

• html 代码模板

输出

图像显示了预处理器的输出。

HAML 预处理器

Haml 代表 HTML Abstraction Markup Language（HTML 抽象标记语言）。Hampton Catlin 开发它，唯一目的是使标记在美学上令人愉悦。它是一个基于 Ruby 的预处理器，需要安装 Ruby。另一种思考 HTML 预处理器的方式是将其视为一种工具，帮助开发人员从预处理器的语法创建 HTML 语法。它包含一些基本 HTML 语法中不存在的特殊元素。

Haml 阻止创建用于在线发布的内联代码。它清理 HTML，并允许它包含某些动态内容。预处理器是始终以特定语言处理的程序；因此，HTML 和 Sass 用于处理 Haml。

预处理器的成功促使创建了多个支持框架，Compass 是其中最受欢迎的一个。

好处

• 由于有丰富的在线资源，学习 Haml 很容易。

缺点

• Haml 使用缩进来指示结构，而不是使用闭合标签。
• 这有时会导致在某些情况下使代码编写效率低下的问题。
• 在单个位置进行更改可能会破坏代码的结构或导致错误。
• 与竞争对手相比，Haml 的渲染速度较慢。

示例

示例显示了 haml 预处理器代码和 html 代码。hall 预处理器不需要开始和结束标签，但它与 html 语言没有太大区别。

示例 1

示例显示了基本 HTML 和 html 代码模板。我们可以看到 html 和 Haml 预处理器的代码与输出相同。

• HAML 代码模板： 语法中显示了简单的表达式。

• html 代码模板

输出

图像显示了预处理器的输出。

示例 2

示例显示了带有 CSS 的基本 HTML 和 html 代码模板。我们可以看到 HTML 和 Haml 预处理器的代码以及设计、颜色和背景色的输出相同。

• Haml 代码模板： 语法中显示了带有样式属性的简单表达式。

• html 代码模板

输出

图像显示了预处理器的输出。

Slim 预处理器

Slim 是一种模板语言，旨在将视图语法简化为仅包含必要元素，而不会使其变得晦涩难懂。最初的想法是看看可以从典型的 HTML 模板中删除多少内容。

好处

• Slim 语法易于阅读，因为它只需要很少的特殊符号。
• 对于以前从未在模板上工作过的人来说，它很容易上手。语法非常简单易读。
• Slim 的文档组织良好且全面，每个概念都清晰明确。
• 对于所有客户都非常有帮助，包括那些刚开始使用模板的客户。
• Slim 从一开始就很简约，易于学习模板。它可以轻松扩展，甚至可以支持流行的 Laravel 应用程序。
• 它能够快速创建代码，并使其可用于尝试或修改代码。
• 如果您需要自动关闭或自动完成插件，它会很有帮助。

缺点

• 不熟悉此语法的设计师可能会觉得 Slim 奇怪，因为它在其语法中使用大写，并且不使用 HTML 标签。

示例

示例显示了 slim 预处理器模板和 html 模板。slim 预处理器不需要开始和结束标签，并且易于理解 HTML 语言。

示例 1

示例显示了基本的 slim 预处理器语法和 html 代码模板。我们可以看到 html 和 slim 预处理器的代码与输出相同。

• Slim 预处理器模板： 语法中显示了简单的表达式。

• html 代码模板： 基本的 html 模板显示了 html 元素和标签

输出

图像显示了预处理器的输出。

示例 2

示例显示了带有 JavaScript 和 CSS 的基本 slim 和 html 代码模板。我们可以看到 html 和 slim 预处理器的相同程序以及验证、设计、颜色和背景色的输出。

• Slim 预处理器模板： 语法中显示了带有样式属性的简单表达式。

• html 代码模板： 基本的 html 模板显示了带有 css 样式标签

输出

图像显示了预处理器的输出。

Handlebars 预处理器

Handlebars 预处理器提供了必要的强大功能，使您能够有效且轻松地创建语义模板。

好处

• 无逻辑模板迫使您通过布局划分关注点，这有助于您避免未来的重构问题。
• 它还允许模板在不进行更改的情况下与多种编程语言一起使用。
• Handlebars 可作为 Django 模块和 JavaScript 库，并提供 Java、Ruby、Scala 和 PHP 库。
• 这意味着您可以在前端和后端应用程序中，根据您的语言选择使用它来创建模板。

负面影响

• 对于 Handlebars，似乎很少有文本编辑器提供语法高亮、自动完成或错误检查等功能。

示例

以下示例显示了 Handlebars 预处理器的基本语法或模板。在这里，我们使用预处理器来显示用户的名字和姓氏。

Handlebars 表达式模板

它以 json 格式应用输入对象。

输出显示了用户名及其标签。

Nunjucks 预处理器

基于令牌的方法集成了许多引擎的循环、逻辑和变量操作功能。它还受益于一些高级网页组合元素，例如包含、块继承、格式继承、自定义标签和宏；这些对于内容管理系统 (CMS) 来说都是非常理想的，因为在 CMS 中，页面通常由一系列“构建块”组成。

好处

• 异步支持
• 广泛的格式继承
• 宏支持
• 简单的传统学院组成
• 过滤器支持
• 代码中的空白控制
• 利用毫无疑问的 HTML，几乎没有空白
• 用于 HTML 以外的其他事物，例如 JSON 和配置文件。
• 自定义标签支持

负面影响

• 缺乏对流式传输的支持

使用 HTML 预处理器的优势和劣势

让我们来分析一下使用预处理器的优势和劣势。

好处

• 它简化了我们代码的外观。它使程序员更容易阅读和理解。
• 代码缩进正确，看起来更好。
• 预处理器主要使用 DRY（Don't Repeat Yourself，不要重复自己）原则来防止代码重复。

缺点

• 带有预处理器的文本编辑器非常少见。因此，它不常用。
• 缩进错误会损害结果。这些问题最常见的原因是代码复制和粘贴。

结论

HTML 预处理器定义了数据类型的转换。最流行的 HTML 预处理器是 Nunjacks、Handlebars、Pug、Slim 和 Haml。Haml 取代了 PHP 和其他模板技术。Pug 提供了条件语句、循环、混合、模板和 JavaScript 对象等功能。

Slim 试图将视图语法简化为必要元素，而不会将其转换为晦涩难懂的格式。Handlebars 提供了您所需的功能，可以快速轻松地创建语义模板。通过 Nunjucks，可以轻松地协同处理模板并实现本地化等复杂功能。