微信小程序教程
9.1 概述
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

微信开发者工具

模板解析引擎 Mustache

概述

什么是Mustache

Mustache是一个logic-less(轻逻辑)模板解析引擎,其作用是实现用户界面与业务数据(内容)的分离。

Mustache的基本原理就是根据特定语法,按照用户定义的模板将业务数据转换为特定格式的文档,通常是转换为标准的HTML文档。

如何使用Mustache

Mustache的使用非常简单,首先通过 script 标签引入它的 js 文件,然后依次定义模板、预编译模板、渲染模板来将业务数据转换为特定的格式,最后将数据填充页面元素。

1)引入mustache.js

就像jQuery一样,Mustache也是一个 js 文件,你只需引用这个 js 文件,就可以使用Mustache了,就这么简单。

你可以从 Github 上,将mustache.js 文件下载到本地使用。如:

<script src="../js/mustache.js"></script>

如果不想下载,从某个CDN引用它也是不错的选择。如:

<script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.js"></script>

2)定义模板

可以有多种方式定义Mustache的模板字符串,最简单的方式,就是直接将字符串作为模板。如,以下代码定义了一个模板,并保存在 template 变量中:

var template = "Welcome to {{name}}.";

3)预编译模板

模板定义好之后,可以通过以下代码来预编译模板:

Mustache.parse(template);

这一步是可选的,你也可以不进行预编译。如果执行预编译,那么预编译之后的 template 就不再是原来的字符串了,就连它的数据类型都已经变成数组类型了,这就是预编译的结果。

并且,编译模板需要耗费时间。但是,一旦预编译好一个模板之后,会大大提升将来使用模板时的效率。因此,对于使用频率比较高的模板,这点开销还是值得的。

4)渲染模板

渲染,就是将业务数据转换为特定格式的文档。渲染形式单一,非常容易理解。只需调用Mustache.render()方法即可完成。代码如下:

var out = Mustache.render(template, data);

Mustache.render() 方法需要两个参数:一个是模板,一个是数据源对象。简单的讲,渲染就是对模板进行变量替换,它的返回结果,就是替换完成后的 HTML 代码。

5)填充页面元素

渲染只是按照模板要求,得到替换完成后的 HTML 代码,它并没有在页面上体现出来。只有将业务数据填充到指定的元素中,才能看到渲染后的实际效果。

假如页面上有一个 id="target" 的元素 <div id="target"></div>,使用以下代码,可以将业务数据填充到该元素中。

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

至此,一个完整的Mustache实例就完成了。以上实例的完整代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> mustache </title>
  <script src="../js/jquery.js"></script>
  <script src="../js/mustache.js"></script>
</head>
<body>
<script>
// template 
var template = "Welcome to {{name}}";
// data
var data = { "name": "waibo.wang" };
// 渲染
var out = Mustache.render(template, data);
//将返回的内容添加到页面 
$(function(){
  $('#target').html(out);
});
</script>
<div id="target"></div>
</body>
</html>

在浏览器中的运行,就可以在浏览器的正文中看到 Welcome to waibo.wang。

需要注意的是,必须在页面准备就绪后,才能将业务数据填充到该元素中,否则会填充失败,看不到任何效果。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验