博客
关于我
简单模板模式
阅读量: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
你可能感兴趣的文章
MuseTalk如何生成高质量视频(使用技巧)
查看>>
mutiplemap 总结
查看>>
MySQL DELETE 表别名问题
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>
Mysql group by
查看>>
MySQL I 有福啦,窗口函数大大提高了取数的效率!
查看>>
mysql id自动增长 初始值 Mysql重置auto_increment初始值
查看>>
MySQL in 太多过慢的 3 种解决方案
查看>>
MySQL InnoDB 三大文件日志,看完秒懂
查看>>
Mysql InnoDB 数据更新导致锁表
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>
MySQL InnoDB引擎的锁机制详解
查看>>