# 简单模板模式 简单模板模式是通过格式化字符串拼接出视图避免创建视图时大量的节点操作，简单模板模式不属于一般定义的`23`种设计模式的范畴，而通常将其看作广义上的技巧型设计模式。 ## 概述 对比于模板方法模式，其定义了如何执行某些算法的框架，通过父类公开的接口或方法子类去实现或者是调用，而简单模板模式是用来解决为了创建视图的大量节点操作，并在此基础上解决数据与结构的强耦合性。 ### 节点操作 如果我们要生成一个列表，直接通过各类节点操作是相对比较麻烦的。 ```html 节点操作
``` ### 基于字符串拼接 如果我们使用字符串拼接，虽然能够减少看上去的复杂程度，但是实际由于数据和结构强耦合导致可维护性通常比较差，这导致的问题是如果数据或者结构发生变化时，都需要改变代码。此外此处使用了`ES6`的模板字符串语法动态生成了一个`ul`列表，看上去貌似不会复杂，如果直接使用字符串拼接，会繁琐很多。 ```html 字符串拼接
``` ### 模板渲染 通过创建模板，我们可以使用数据去格式化字符串来渲染视图并插入到容器中，这样实现的方案可读性会高很多。 ```html 模板渲染
``` ### 模板引擎的简单实现 对`mustcache`风格的`{{}}`进行简单的实现，仅对于其数据的展示方面有实现，对于其指令例如循环等并未实现，通过处理字符串，将其转换为一个函数并传参执行，即可实现数据的展示。通过对于字符串的处理并使用`Function`实现模板语法，如果使用正则表达式进行较为完整的过滤，是完全可以生成较为完善的模板语法的处理的，包括`Js`的表达式以及自带指令等，如`mustcache.js`、`layui.js`的`laytpl`模块。 ```html 模板引擎
{{show}}
{{description}}
``` ### AST 基于`AST`的模板语法需要解析`HTML`成为`AST`，然后将`AST`转化为字符串，将字符串作为函数执行，这个过程依旧需要用到`Function`，下边的例子只是借助了`Js`取得`DOM`结构生成的`AST`，没有自行解析`HTML`。虽然看起来最后都需要使用`Function`去处理字符串，而`AST`还需要解析`HTML`然后再拼接字符串，增加了计算的时间，但是如果仅仅是完全基于处理字符串的方式实现的模板语法，在数据进行变更时都需要进行`render`，每次`render`的时候都需要重新渲染整个`DOM`，虽然在上边的简单实现中`AST`也是重新渲染了整个模板，但是现在主流的`Js`框架例如`Vue`就是基于`AST`的方式，首先解析`template`为`AST`，然后对于`AST`进行静态节点标记，用以标记静态的节点进行重用跳过比对，从而进行渲染优化，然后生成虚拟`DOM`，当数据进行变更时虚拟`DOM`会进行`diff`算法的比对，找到数据有变更的节点，然后进行最小化渲染，这样就不需要在数据变更时将整个模板进行渲染，从而增加了渲染的效率。 ```html AST
{{show}}
{{description}}
``` ## 每日一题 ``` https://github.com/WindrunnerMax/EveryDay ``` ## 参考 ``` https://juejin.cn/post/6844903633000087560 https://www.cnblogs.com/libin-1/p/6544519.html https://github.com/sentsin/layui/blob/master/src/lay/modules/laytpl.js ```