博客
关于我
简单模板模式
阅读量: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中null和空字符串的区别与问题!
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢?
查看>>
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>