当前位置: 首页 > 工具软件 > jsrender > 使用案例 >

了解前端渲染模板 -- jsRender

颛孙英勋
2023-12-01

前端渲染与后端渲染

后端渲染
后端渲染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()  // 转换获取数据

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

 类似资料: