Mustache.js前端模板引擎初识

目前在看一个项目，在一遍遍撸代码的时候，发现代码里调用了一个Mustache.render()方法.

经过百度后，发现Mustache.js是一套轻量级模板引擎。

所以现在就要仔细学习一下，它是如何工作的。

一般来说mustache在js中的使用方法都是如下：

var template = $('#template').html();

  Mustache.parse(template);   // optional, speeds up future uses

  var rendered = Mustache.render(template, {name: "Luke"});

  $('#target').html(rendered);

通过项目代码了解到，项目里实际用到的调用方法是：var rendered = Mustache.render(template, {name: "Luke"});  //类似于这样的

 

那么很容易就能看出 Mustache.render(template, {name: "Luke"})  //其中第一个参数接收的是模板的位置(也就是要找到推送数据的模板DOM层级),第二个参数是要推送的数据

 

在模板里是如何数据和展现一一匹配的呢？模板里大概是这样的语法：{{key}} -> value 实际根据第二个参数的名字和模板的Value匹配后，进行赋值的。