资讯专栏INFORMATION COLUMN

浅谈web中前端模板引擎的使用

妤锋シ / 1464人阅读

摘要:置换型模板引擎的优点实现简单,缺点效率低,无法满足高负载的应用请求。用途百度词条模板引擎可以让网站程序实现界面与数据分离,业务代码与逻辑代码的分离,提升开发效率,良好的设计也提高了代码的复用性。前端模板的出现使得前后端分离成为可能。

模板引擎

模板引擎-百度词条

什么是模板引擎?(百度词条)

模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎会生成一个标准的HTML文档。

原理(百度词条)

模板引擎的实现方式有很多,最简单的是“置换型”模板引擎,这类模板引擎将指定模板内容(字符窜)中的特定标记(子字符窜)替换一下变生成了最终需要的业务数据(比如网页)。

置换型模板引擎的优点:实现简单, 缺点: 效率低,无法满足高负载的应用请求。

用途(百度词条)

模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,提升开发效率,良好的设计也提高了代码的复用性。

我们司空见惯的模板安装卸载等概念,基本上都和模板引擎有着千丝万缕的联系。模板引擎不只是可以让你实现代码分离(业务逻辑代码和用户界面代码),也可以实现数据分离(动态数据与静态数据),还可以实现代码单元共享(代码重用),设置是多语言、动态页面与静态页面自动均衡(SDE)等等与用户界面可能没有关系的功能。

前端模板

AJAX的出现使得前后端分离成为可能。

后端专注于业务逻辑,为前端提供接口。

前端通过AJAX的方式向后端的接口请求数据,然后动态渲染页面。

//假设接口数据如下
//[{friends: "Sharon"}, {friends: "Sandy"}, {friends: "Roc"}]

//假设渲染后的页面

  • Sharon
  • Sandy
  • Roc

模板引擎出现之前,当然是在js中遍历拼接字符窜。

确实很简单方便,但是也有很多缺点:

html代码(View层) 和 JS代码 (Controller层),UI与逻辑代码混杂在一起,非常不便于阅读。 一旦业务复杂起来,不容易维护。

从安全角度来讲,也会有代码注入攻击风险(code injection)。

从代码者的角度来讲,如果需要拼接的HTML代码里有很多引号的话(比如标签里面有很多属性),那么就非常容易出错。

既然这样,总要想办法解决问题!

这就引出模板引擎, Underscore的_.template可能是最简单的前端模板引擎了(或者可以说,这就是个前端模板函数)。

引用_.template,将以上的代码改写。

这样的话,前端需要改HTML代码,只需要改模板即可。

用户界面与逻辑代码不在混杂,可维护性和扩展性大大的提高了。

如何实现一个模板引擎呢? 实现的思路是什么呢?

感兴趣的话,可以看看我翻译的两篇文章。

翻译_20行代码创造JavaScript模板引擎(一)

翻译_只需20行代码创造JavaScript模板引擎(二)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98828.html

相关文章

  • 浅谈 Web 前后端模板引擎使用

    摘要:前端模板的出现使得前后端分离成为可能。总结本文简单介绍了模板引擎在前后端的使用,下文我们回到,重点分析下的使用方式以及源码原理。楼主对于模板引擎的认识比较浅显,有不正之处希望指出感谢 前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此文,...

    chenjiang3 评论0 收藏0
  • 浅谈模板引擎之artTemplate

    摘要:来给大家推荐一款模板引擎,会推荐这款模板引擎最主要还是他轻量级,代码简洁,好用,一个大概也才几左右。 对于前端开发者来说,有一个绑数据的模板是多么的幸福,不用我多说大家也知道,终于不用在js中一个个字符串拼接一大推元素数据啥的,可以省下我们很多时间。来给大家推荐一款模板引擎artTemplate,会推荐这款模板引擎最主要还是他轻量级,代码简洁,好用,一个template.js大概也才几...

    zeyu 评论0 收藏0
  • 浅谈模板引擎之artTemplate

    摘要:来给大家推荐一款模板引擎,会推荐这款模板引擎最主要还是他轻量级,代码简洁,好用,一个大概也才几左右。 对于前端开发者来说,有一个绑数据的模板是多么的幸福,不用我多说大家也知道,终于不用在js中一个个字符串拼接一大推元素数据啥的,可以省下我们很多时间。来给大家推荐一款模板引擎artTemplate,会推荐这款模板引擎最主要还是他轻量级,代码简洁,好用,一个template.js大概也才几...

    caohaoyu 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    dailybird 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    hellowoody 评论0 收藏0

发表评论

0条评论

妤锋シ

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<