前端模板引擎
前端发展迅速,各种各样的新技术迭代,对后端来说,想做个多表单/多数据展现的页面,布局与难度都越来越大.
模板引擎的好处在于做数据渲染,对应后端人员来说,可以当做vm
一样使用.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
Handlebars
可以在没有挫败感的情况下有效的构建语意模板,方便数据渲染.
hello world
- 安装
1.1 源码安装:
下载地址:handlebars-v4.0.11.js
引入js
:<script src="https://cdn.bootcss.com/handlebars.js/4.0.11/handlebars.min.js"></script>
1.2 使用
NPM
:npm install --save handlebars
在 node 或webpack 中 使用require(‘handlebars’);进行引入
1.3 使用Bower
:bower install --save handlebars
-
初体验
2.1 定义模板
Handlebars
看起来跟普通的html
代码没啥区别,对于数据展示,使用嵌入式的表达式<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>
Handlebars的语法表达式是通过
{{
与}}
进行包围表示的
我们可以把模板内容放置在一个<script></script>
标签中,如下:<script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div> </script>
我们需要注意的是,模板代码需要放置在
<script></script>
标签中而不是直接放在html
中,因为html
会被解析渲染到界面.
2.2 编译模板
我们通过在js
中调用Handlebars.compile
进行模板数据的编译var source = document.getElementById("entry-template").innerHTML; var template = Handlebars.compile(source);
注意:这种编译方式不推荐用于生产应用程序,特别是移动设备,更好的方式是进行预编译,而不是在浏览器中编译(耗时).
接下来我们进行数据传入var context = {title: "第一个模板", body: "这是通过Handlebars生成的一第一个模板内容"}; var html = template(context);
此时,
html
的值就是:<div class="entry"> <h1>第一个模板</h1> <div class="body"> 这是通过Handlebars生成的一第一个模板内容 </div> </div>
2.3 更多内容参考:
handlebars - 初级使用方式:
3.1 引入
js
文件 3.2 在script
标签中定义模板 3.3 在js
中编译模板,然后传入数据进行数据替换 3.4 获取到生成的html
后渲染到指定的节点中去.