博客
关于我
简单模板模式
阅读量:404 次
发布时间:2019-03-06

本文共 1539 字,大约阅读时间需要 5 分钟。

简单模板模式

简单模板模式是通过格式化字符串拼接出视图避免创建视图时大量的节点操作,简单模板模式不属于一般定义的23种设计模式的范畴,而通常将其看作广义上的技巧型设计模式。

描述

对比于模板方法模式,其定义了如何执行某些算法的框架,通过父类公开的接口或方法子类去实现或者是调用,而简单模板模式是用来解决为了创建视图的大量节点操作,并在此基础上解决数据与结构的强耦合性。

节点操作

如果我们要生成一个列表,直接通过各类节点操作是相对比较麻烦的。

    节点操作    

基于字符串拼接

如果我们使用字符串拼接,虽然能够减少看上去的复杂程度,但是实际由于数据和结构强耦合导致可维护性通常比较差,这导致的问题是如果数据或者结构发生变化时,都需要改变代码。此外此处使用了ES6的模板字符串语法动态生成了一个ul列表,看上去貌似不会复杂,如果直接使用字符串拼接,会繁琐很多。

    字符串拼接    

模板渲染

通过创建模板,我们可以使用数据去格式化字符串来渲染视图并插入到容器中,这样实现的方案可读性会高很多。

    模板渲染    

模板引擎的简单实现

mustcache风格的{{}}进行简单的实现,仅对于其数据的展示方面有实现,对于其指令例如循环等并未实现,通过处理字符串,将其转换为一个函数并传参执行,即可实现数据的展示。通过对于字符串的处理并使用Function实现模板语法,如果使用正则表达式进行较为完整的过滤,是完全可以生成较为完善的模板语法的处理的,包括Js的表达式以及自带指令等,如mustcache.jslayui.jslaytpl模块。

    模板引擎    
{{show}}
{{description}}

AST

基于AST的模板语法需要解析HTML成为AST,然后将AST转化为字符串,将字符串作为函数执行,这个过程依旧需要用到Function,下边的例子只是借助了Js取得DOM结构生成的AST,没有自行解析HTML。虽然看起来最后都需要使用Function去处理字符串,而AST还需要解析HTML然后再拼接字符串,增加了计算的时间,但是如果仅仅是完全基于处理字符串的方式实现的模板语法,在数据进行变更时都需要进行render,每次render的时候都需要重新渲染整个DOM,虽然在上边的简单实现中AST也是重新渲染了整个模版,但是现在主流的Js框架例如Vue就是基于AST的方式,首先解析templateAST,然后对于AST进行静态节点标记,用以标记静态的节点进行重用跳过比对,从而进行渲染优化,然后生成虚拟DOM,当数据进行变更时虚拟DOM会进行diff算法的比对,找到数据有变更的节点,然后进行最小化渲染,这样就不需要在数据变更时将整个模板进行渲染,从而增加了渲染的效率。

    AST    
{{show}}
{{description}}

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://juejin.cn/post/6844903633000087560https://www.cnblogs.com/libin-1/p/6544519.htmlhttps://github.com/sentsin/layui/blob/master/src/lay/modules/laytpl.js
你可能感兴趣的文章
mysql 如何给SQL添加索引
查看>>
mysql 字段区分大小写
查看>>
mysql 字段合并问题(group_concat)
查看>>
mysql 字段类型类型
查看>>
MySQL 字符串截取函数,字段截取,字符串截取
查看>>
MySQL 存储引擎
查看>>
mysql 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
查看>>
MySQL 存储过程参数:in、out、inout
查看>>
mysql 存储过程每隔一段时间执行一次
查看>>
mysql 存在update不存在insert
查看>>
Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
查看>>
Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
查看>>
Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
查看>>
Mysql 学习总结(89)—— Mysql 库表容量统计
查看>>
mysql 实现主从复制/主从同步
查看>>
mysql 审核_审核MySQL数据库上的登录
查看>>
mysql 导入 sql 文件时 ERROR 1046 (3D000) no database selected 错误的解决
查看>>
mysql 导入导出大文件
查看>>
MySQL 导出数据
查看>>
mysql 将null转代为0
查看>>