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匹配后,进行赋值的。

时间: 2024-10-23 19:49:41

Mustache.js前端模板引擎初识的相关文章

Mustache.js前端模板引擎源码解读【二】

上一篇解读完解析器的代码,这一篇就来解读一下渲染器. 在之前的解读中,解读了parseTemplate如何将模板代码解析为树形结构的tokens数组,按照平时写mustache的习惯,用完parse后,就是直接用 xx.innerHTML = Mustache.render(template , obj),因为此前会先调用parse解析,解析的时候会将解析结果缓存起来,所以当调用render的时候,就会先读缓存,如果缓存里没有相关解析数据,再调用一下parse进行解析. Writer.proto

Mustache.js前端渲染模板

引自:http://blog.csdn.net/xuemoyao/article/details/17896203 Mustache 使用心得总结 前言: 之前的一个项目里面就有用到这个前台的渲染模版,当时挺忙的也没时间抽空总结一下,刚好上周项目里又用到这个轻量型的渲染模版,真心感觉很好用,因此就总结一下使用心得,算是一个入门级别的指引吧. 1.  Mustache 概述 Mustache是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语

前端模板引擎入门

模板引擎 模板引擎 起到 数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍,  java后台的模板引擎, freemark介绍,其图能很好标明这种关系. http://freemarker.org/ Apache FreeMarker is a template engine: a Java library to generate text output (HTML web pages, e

前端模板引擎arttemplate,后端模板引擎Nvelocity

It's my first blog 大家好,我叫曾岑,朋友们都叫我包子,今年21岁,湖北人,刚大学毕业,学的.net开发.去年一年,在南京工作了一年,那时候还没有拿到毕业证,找工作也是蛮难的,别人说没毕业证,也没经验,工资只能给个基础工资,不过还好,和几个朋友一起结伴去的,一起租的房子住的.在南京的工作经历就不说那么多了,至少让我看到了编程的这个世界. 今年7月份,辞掉了南京的工作,来到了深圳这个城市,重新开始找工作,运气还算不错,第二天就面试上了,第三天就正式上班了,工资待遇对于我这种新手来

前端模板引擎 超轻量

;(function(global ,undefined){ var cache = {} var sn = '_ret_' + new Date().toString(36) function etic(tplNode , data){ var tplId = tplNode.id || (tplNode.id = uuid()) function cbk(){ return data ? cache[tplId].call(data) : cache[tplId] } if (cache[t

node.js ejs模板引擎将后端数据赋值给前端js

使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使用ejs,选它是因为跟Asp.Net的模板引擎有点相似吧. 先来看一下这几个模板引擎: jade模板 html head title #{title} meta(charset="UTF-8") body div.description #{description} ul - each d

前端模板引擎汇总

1. 本文所指的模板引擎是指用在传统的jquery项目中,所以和  Vue.react 项目本身就没有可比性,模板引擎本身也只是做数据的渲染和简单的逻辑处理,想有其他的功能那就直接用 Vue .react好了 2. 模板引擎就和其他的类库框架一样有很多种,本文只列出适合我自己的或是比较流行的几个 一.hogan.js 1. 语法最简单,只做数据渲染,没有逻辑处理,出自 推特 2. 官网:https://twitter.github.io/hogan.js/      github:https:/

js常用模板引擎

baiduTemplate(百度).artTemplate(腾讯).juicer(淘宝).xtemplate.doT.Jade 1.Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建web模板. 在加载时被预编译,而不是到了客户端执行到代码时再去编译,这样可以保证模板加载和运行的速度. http://handlebarsjs.com/ http://caibaojian.com/handlebars-js.html 2.Jade是一个有着完善

juicer前端模板引擎

Juicer 中文文档:http://www.juicer.name/docs/docs_zh_cn.html官网:http://juicer.name/ 一个Javascript模板引擎的实现和优化(http://www.open-open.com/lib/view/open1335161835655.html)完全剥离html和代码逻辑,便于多人协作和后期的代码维护.市面上众多的模板引擎,诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, n