后端渲染:
后端渲染HTML的情况下,浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串
前端渲染:
前端渲染就是指浏览器会从后端得到一些信息,将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的,在形成了HTML字符串之后,再进行显示。
前后端模板渲染的区别
前端模板,主动权在前端,代码逻辑清晰;但会有延迟,主要在于异步请求数据,编译输出
后端模板,减少一次http请求,页面渲染快,代码逻辑不清晰,过度耦合,维护成本比较高
jsrender是一个JS库,允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库,它具有无代码标记语法和高性能,支持创建自定义函数并使用纯粹的基于字符串的渲染。
优先使用场景:元素重复出现;动态加载数据,并在前端显示;
例如:
<script type="text/x-jsrender" id="look-more">
<dd class="flex" data-user-id="<%:id%>" data-user-info='<%:~toStringify(#data)%>'>
<div class="w160 name"><%:name%></div>
<div class="w160" data-value="<%:id_type%>"><%:id_type == 1 ? '111': '123%></div>
<div class="flex1 el-clamp"><%:id_number%></div>
<div class="flex1 el-clamp"><%:team_name%></div>
</dd>
</script>
在渲染模板的同时,将后台获取的数据直接进行渲染。
<div class='look'></div>
var notifyData = $.templates('#look-more').render(data.result);
$('.look').html(notifyData)
原始赋值: {{:属性名}},显示原始数据
转码赋值: {{>属性名}},显示HTML编码后的数据,让数据原样输出
{{if 表达式}} … {{else}} … {{/if}} // 判断
{{for 数组}} … {{/for}} // 循环
$.templates() // 编译字符串模板
$.views.converters() // 转换获取数据