js模版引擎介绍

最新推荐文章于 2024-07-21 13:40:10 发布

Jasminecjc

最新推荐文章于 2024-07-21 13:40:10 发布

阅读量1.7k

点赞数

分类专栏：原生js 文章标签： javascript 性能模版引擎

本文链接：https://blog.csdn.net/JASMINECJC/article/details/51509982

版权

本文介绍了JavaScript模板引擎的作用和使用场景，详细讲解了模板引擎的组成部分：语法、解析、编译、缓存和渲染。文章对比了几种常见的模板引擎，如Mustache、Handlebars、EJS和art-template，分析了它们的特点、优势和适用场景，帮助开发者选择合适的模板引擎。

摘要由CSDN通过智能技术生成

js模版引擎介绍

JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法，但通常是非常简单的，一个要注意的有趣的点是，替换标记通常是由双花括号({ {……} })表示，这也是 Mustache 和 Handlebars 名字的来源。

什么时候使用JavaScript模板？

一旦我们发现自己在 JavaScript 字符串内包含 HTML，就应该开始考虑 JavaScript 模板可能给我们带来的好处。当建立一个可维护的代码库，关注点分离是至关重要的，所以任何可以帮助我们实现这一目标的手段都应该探索。
在前端 web 开发，将 HTML 从 JavaScript 分离显得很重要（这是双向的，我们也不应该在 HTML 中内联 JavaScript）

概述

模板引擎大都由 5 部分组成：语法、解析、编译、缓存、渲染。

语法，定义模板书写方式
- Embedded JavaScript Templates，意思是说你可以将js直接写在模板里面，从而实现一些复杂的渲染逻辑。基于原生 JS语法，解析简单、渲染性能接近极限；书写略烦，容易导致模板中出现过多的业务代码而失控。
- Logic-less Templates，这种模板引擎的哲学是模板应当同逻辑尽可能的分离，因此，你不能在模板中随意加入js代码，而只能利用模板引擎本身提供的机制来实现一些简单的功能。基于自定义语法，解析复杂、渲染性能不一
解析，包括词法分析（lexical analysis、scanning）和语义分析（syntax analysis、parsing）两步。
- 手写解析器，基于正则的字符串解析、转义
- 基于解析器生成器自动生成
- 基于 DOM 结构存储模板，解析存储在 data- 的配置
编译，模板为直接可直接运行的函数
- 及时编译
- 预编译
- 延迟编译
缓存，用于提升性能
- 缓存编译结果（函数）
- 缓存渲染过程中涉及的数据（查找结果，字符串）
- 不缓存，由用户缓存
渲染，执行编译结果，生成 HTML
- 优先从缓存中读取

各种模板引擎主要是解析方式的不同，语法、编译、缓存、渲染则各有权衡。

几种常见模版引擎的介绍：

)

mustache.js (Github地址)
mustache是logic-less的，所以其一大特点是模板中没有任何if，for结构，而是通过数据的值来实现分支和循环的。这种分离带来的好处是模板清晰，易于维护。

关键点
- 文件9kb大小（很小）
- 简单
- 无依赖
- 无逻辑
- 非预编译模板
- 编程语言无关
模板：
1. <h1>{ {header}}</h1>
2. { {#bug}}
3. { {/bug}}
5. { {#items}}
6. { {#first}}
7. <li><strong>{ {name}}</strong></li>
8. { {/first}}
9. { {#link}}
10. <li><a href="{ {url}}">{ {name}}</a></li>
11. { {/link}}
12. { {/items}}
14. { {#empty}}
15. <p>The list is empty.</p>
16. {