了解前端渲染模板 -- jsRender

前端渲染与后端渲染

后端渲染：
后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串
前端渲染：
前端渲染就是指浏览器会从后端得到一些信息，将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的，在形成了HTML字符串之后，再进行显示。
前后端模板渲染的区别

• 前端模板，主动权在前端，代码逻辑清晰；但会有延迟，主要在于异步请求数据，编译输出

• 后端模板，减少一次http请求，页面渲染快，代码逻辑不清晰，过度耦合，维护成本比较高

jsRender是什么？

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)

jsRender 语法

原始赋值： {{:属性名}}，显示原始数据
转码赋值： {{>属性名}}，显示HTML编码后的数据，让数据原样输出
{{if 表达式}} … {{else}} … {{/if}} // 判断
{{for 数组}} … {{/for}} // 循环
$.templates() // 编译字符串模板
$.views.converters()  // 转换获取数据

具体可以参考 点我
或者 去官网