前端模板引擎

一. 为什么要使用模板引擎

关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照我老师的一句话表达:不用重复制造轮子. 对于为什么要使用模板引擎的解释,我看过最好的回答来自知乎上niko的回答:

模板最本质的作用是【变静为动】一切利用这方面的都是优势,不利于的都是劣势。要很好地实现【变静为动】的目的,有这么几点:
1. 可维护性(后期改起来方便)
2. 可扩展性(想要增加功能,增加需求方便)
3.开发效率提高(程序逻辑组织更好,调试方便)
4.看起来舒服(不容易写错)
从以上四点,你仔细想想,前端模板是不是无论从哪方便优势体现都不是一点两点。其实最重要的一点就是:【视图(包括展示渲染逻辑)与程序逻辑的分离】分离的好处太多了,更好改了,更好加东西了,调试也方便了,看起来也舒服了,应用优秀的开发模式更方便了(mvvc,mvc等).

二. 选择Handlebars的原因

1. 全球最受欢迎的模板引擎

Handlebars是全球使用率最高的模板引擎,所以当之无愧是全球最受欢迎的模板引擎.Handlebars在许多前端框架中都被引入,比如在MUI和AmazeUI等框架,都推荐使用Handlebars.以AmazeUI为例,AmazeUI的文档中专门为Web组件提供了其Handlebars的编译模板

Amaze UI 提供的开发模板中,包含一个 widget.html 文件,里面展示了 Widget 在纯浏览器环境中的使用。

要点如下:

1.引入 Handlebars 模板 handlebars.min.js;
2.引入 Amaze UI Widget helper amui.widget.helper.js;
3.根据需求编写模板 4.传入数据,编译模板并插入页面中。

$(function() {
  var $tpl = $('#amz-tpl');
  var source = $tpl.text();
  var template = Handlebars.compile(source);
  var data = {};
  var html = template(data);

  $tpl.before(html);
});

2. 语法简单

Handlebars的基本语法极其简单,使用{{value}}将数据包装起来即可,Handlebars会自动匹配响应的数值和对象.以下是一个最简单的模板:

<div class="demo">
    <h1>{{name}}h1>
    <p>{{content}}p>
div>

三.如何使用Handlebars

1. 下载Handlebars

  • 通过Handlebars官网下载: http://handlebarsjs.com./installation.html
  • 通过npm下载: npm install --save handlebars
  • 通过bower下载: bower install --save handlebars
  • 通过Github下载: https://github.com/daaain/Handlebars.git
  • 通过CDN引入:https://cdnjs.com/libraries/handlebars.js

2. 引入Handlebars

通过

你可能感兴趣的:(模板引擎)