您现在的位置: 首页 > 微信营销 > 营销推广 > smarty模板, 【第639期】前端模板与渲染那些事儿

smarty模板, 【第639期】前端模板与渲染那些事儿

作者:   来源:  热度:0  时间:2020-08-01







前言在整个项目中纯粹靠数据接口来“深入浅出”开发联调的前端er,前端数据的渲染是少不了了,这其中就会运用到今天所要分享的模板渲染。那我们今天就来看看百度@侯禹

前言

在整个项目中纯粹靠数据接口来“深入浅出”开发联调的前端er,前端数据的渲染是少不了了,这其中就会运用到今天所要分享的模板渲染。那我们今天就来看看百度@侯禹童鞋的分享。前端小鲜肉可以看过来~

正文从这开始~

作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板。我们今天就来聊聊,拼装与渲染模板的那些事儿。

页面级的渲染

在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串。浏览器对其进行渲染。html中可能会混有一些php(或者php中混有一些html)。在服务端将数据与模板进行拼装,生成要返回浏览器端的html串。

这与我们现在做一个普通网页没什么区别。只不过现在,我们更常使用模板技术来解决前后端耦合的问题。

前端使用模板引擎,在html中写一些标签,与数据与逻辑基本无关。后端在渲染的时候,解析这些标签,生成HTML串,如smarty。其实前端与后端的交互在服务端就已经有一次了。

模板:

这种方式的特点是展示数据快,直接后端拼装好数据与模板,展现到用户面前。

异步的请求与新增模板

新的时代,由ajax引领。(Asynchronous Javascript And XML),这种技术的历史,我就不再赘述。ajax的用法也有多种。

ajax接受各种类型的返回。包括XML/JSON/String等。前端发起ajax请求,后端直接将数据返回。

但是,读者们有没有想过,ajax回来的数据是干嘛用的呢?相信大部分人使用ajax拿回的数据是用来展示的。前端得把ajax拿回来的数据与模板进行拼装。这就面临了一个问题,当你的模板非常华丽的时候(也就是模板代码比较多的时候)。我们在前端写的拼字符串的逻辑,会非常的复杂。

也有的人图省事,直接就在ajax的返回值中,传输拼装好的html字符串。这样可以直接把ajax拿到的html字符串,填充到页面上。

下面实例说明一下两种方式:

ajax获取字符串直接渲染方式

如图2.1.1所示:

ajax获取数据,前端进行拼装的方式

效果如图2.2.1所示:

两种方式的权衡 

那么,如何权衡两种方式呢?

笔者单从自己的思维考虑,得出以下结论。如果这种模板的拼装会发生多次。是一个非常频繁的行为,且模板基本一致,只是数据变动的话,最好是一开始采用客户端拼装的方法。因为,同样的模板没有必要被传到客户端好几次。这样,我们可以剩下传输同样模板的流量,请求更快。

类似于新闻流这种网站比较适合这种方式,如今日头条,如图2.3.1所示:

笔者在DOM上面打了断点后,找到了其拼装模板,确是在客户端所做。

不过,这种做法也有问题,就是用户同步刷新的时候,需要等页面渲染完,再发一个请求,去请求第一屏的数据,才能开始渲染。这个过程相当于发了两次请求,等待的时候还是有所感知的,如图2.3.3所示。

所以这种方式也是有些不尽人意的地方的。经过查看,网易新闻的web版,今日头条的web版,天天快报的web版均是采用这种方式。

第二种方式,同步的时候,就将一段渲染好的HTML,直接输出到页面,而在异步的时候,请求的也是这段HTML,直接将请求回的HTML往页面上一塞就完成了。这样就可以达到同步页面的时候,直接输出,用户就不会看到等待中的小菊花了。

百度首页就采取了这种方式。新闻直出,无需等待如图2.3.4

但是每次请求新闻的时候,也会去请求HTML片段,如图2.3.5所示

这种方式虽然首屏较快,但是,还是有优化空间的。

混合方式

看过了上述两种方式,聪明的你肯定会想:如果前端的js里写一份模板,后端的html(jsp/asp/smarty)中也写一份模板呢?这样,同步的时候,直接用后端HTML(jsp/asp/smarty)中的模板。异步拉取数据的时候,每次使用js中的模板进行拼装。同步也能保证首屏的速度,异步也能保证传输量的限制与速度。可是这样,也会面临问题,那就是,你的模板需要维护两份。如果那天产品和你说,我要改一下页面的结构。你不得不改动HTML的时候。js中与jsp/asp/smarty中的模板都需要同样的更改两次。

前端的模板引擎

如果说,后端可以将html的拼装转变为使用引擎的话,前端为什么不可以呢?这里我先给大家写一个非常简单的模板解析函数,效果如图2.5.1

这样就制作了一个简单的前端模板,有兴趣的读着可以看看我写的smartyMonkey前端模板引擎:

https://github.com/houyu01/smartyMonkey

前后端同构

刚刚说过了前端模板,后端模板,前端与后端都需要模板引擎。比如,我们的在后端的模板是这样写的:

前端解析模板的引擎的语法,与后端j解析模板引擎语法一致。这样就达到了一份HTML前后端一起使用的效果。一改俱改,一板两用。其实这样也不算极致的完美,因为聪明的读者会发现,在页面加载的时候,我们多传了一份模板给到前端,如果用户不触发重新渲染的话,可能我们传到前端的模板就算白传了,造成了浪费。聪明的读者们可以考虑一下,如何把这份也给省下去。

模板的更新

有的时候,我们需要整片DOM进行更新,比如:

这些html中的节点,需要在某次行为之后,一起被更新。那么我们的js可能会变成这样:

这样的维护,成本极大,还不如直接把整个html重新刷新一遍。这就遇到了我们的js拼装模板了:

但是,直接刷HTML的成本太高。这样浏览器不得不整颗html子树全部重新构建一下,这种方法的性能又不如上一种方法好。

好在react给了我们一种新的思路,它用最少的开销帮我们处理模板的更新,却又不用我们维护更新时繁琐的步骤。有兴趣的读者可以了解一下react-webdiff算法及其应用。https://segmentfault.com/a/1190000000606216

思考

好了,关于前端常见的模板的拼装与更新,我们就讲到这里,同学们有没有考虑过,自己的项目中,如果有异步请求并渲染的逻辑的时候,采用前端拿数据拼装、前端拿拼装好的模板、混合使用哪种更好呢?

 

最后

既然聊到前端模版渲染,那就不得不聊聊前端模版引擎,在大家平时开发中主要用到哪款引擎呢?

 

关于本文

作者:@侯禹

原文链接:https://segmentfault.com/a/1190000005916423

欢迎投稿到前端早读课

投稿邮箱:181422448@qq.com

 

最近工作中用到 Smarty 模板引擎,整理了一些用到的模板函数。

假设 smarty 的定界符为 {}。

  • 模板中获取服务端 $_GET 的值:

{$smarty.get.参数名}
  • 模板中获取服务端 $_POST 的值:

{$smarty.post.参数名}
  • 模板中获取服务端 $_REQUEST 的值:

//request可以获取get或post的值。
{$smarty.request.参数名}
  • 模板中获取服务端 $_SESSION 的值:

{$smarty.session.参数名}
  • 模板中获取服务端 $_COOKIE 的值:

{$smarty.cookies.参数名}
  • 模板中获取服务端 $_SERVER 的值:

{$smarty.server.参数名}
  • 模板中将时间戳转成Y-m-d H:i:s:

{$参数名|date_format:'%Y-%m-%d %H:%M:%S'}
  • 模板中将字符串转成小写:

{$参数名|lower}
  • 模板中将字符串转成大写:

{$参数名|upper}
  • 模板中将字符串首字母转成大写:

{$参数名|capitalize}
  • 模板中将字符串后加入字符:

{$参数名|cat:'字符串'}
  • 模板中如果变量为空或不存在就设置默认值:

{$参数名|default:'字符串'}
  • 模板中字符串长度超多20后面隐藏用...连接:

{$参数名|truncate:23:"...":true}
  • 模板中将字符串中的HTML转换为HTML编码方式:

{$参数名|escape:html}
  • 模板中将字符串中的HTML转换为URL编码方式:

{$参数名|escape:url}
  • 模板中利用正则表达式替换字符:

{$参数名|regex_replace:"/字符串1/":"字符串2"}
  • 模板中利用Replace替换字符:

{$参数名|replace:"字符串1":"字符串2"}
  • 模板中格式化数字为Float类型(四舍五入保留两位小数)

{$参数名|string_format:"%.2f"}
  • 模板中格式化数字为Int类型(如果有小数点位,会舍去)

{$参数名|string_format:"%d"}
  • 如果js的{} 与 smarty定界符冲突:

(1)修改定界符设成 
(2)可以把JS代码包含在{literal} {/literal}之间。

Thanks ~

欢迎关注微信公众号,一起交流学习 ~ 

1、什么Smarty模板引擎

Smarty是一个基于PHP开发的PHP模板引擎。它提供了逻辑(PHP与外在内容(HTML的分离。

2、为什么要学习Smarty模板引擎

特点

1)速度 :相对于其他的模板引擎而言,Smarty具有更快的响应速度

2)编译型 :当我们第一次访问模板文件时,系统会自动对其进行编译,当第二次访问时,系统首先判断模板是否发生改变,如未改变,则直接调用编译文件。

3)缓存技术 当我们第一次访问模板文件时,如果开启了缓存机制,系统会自动生成缓存文件,当第二次访问时,如果模板文件没有改变且缓存文件没有过期则直接调用缓存文件以获取更快的响应速度。

编译技术  缓存技术  静态化技术

4)插件技术 方便后期扩展

5)语句自由 :if/elseif/else/endif

 

注:以下项目不适于采用Smarty

实时更新的项目

小项目也不适合采用Smarty

3下载Smarty

Smarty官网:下载后如下图所示:

打开libs核心库,结构如下图所示:

4Smarty部署

第一步复制libs目录到项目目录中并改名为smarty

第二步创建一个文件夹templates作为模板目录(默认)

第三步创建一个php页面作为项目入口文件

5、使用Smarty

第一步载入Smarty3.0入口文件

第二步实例化Smarty对象

第三步:更改对象的默认属性或行为(更换路径,开启缓存)

第四步通过assign方法分配变量到模板文件

第五步通过display方法显示输出模板内容

【IT科技之家-itkeji综合 -文章版权声明】

非特殊说明,本文版权归 [ IT科技之家-itkeji综合 ]  所有,转载请注明出处.

更多文章请关注:itkeji综合

转载请注明出处:smarty模板, 【第639期】前端模板与渲染那些事儿 :http://www.36duweixin.com/marketing/211161.html
  • 登录

    使用微信帐号直接登录,无需注册