Atitit 模板引擎总结目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el

Atitit 模板引擎总结

1. 模板引擎 1

2. 常见模板步骤 1

2.1. 1）定义模板字符串 1

2.2. 2）预编译模板 2

2.3. 渲染模板 2

3. 流程渲染 if else foreach 3

模板引擎
常见模板步骤

mustache的使用非常简单，先通过script标签引入它的js文件，然后按下面的步骤操作：

1）定义模板字符串

定义模板有2种方式，方式一就是在前面部分中看到的，直接用[...].join('')的方式在js代码中定义，方式二直接把模板内容用script定义在html中：

- Hide code

Hello {{name}}!</script>

然后在编译模板之前，通过获取tpl的innerHTML定义原始模板串：

- Hide code

var tpl = document.getElementById('tpl').innerHTML.trim();

具体要用哪种方式来定义模板，可以参考下面的建议：
如果这个模板要用于多个页面，推荐把模板定义在js代码中；如果这个模板只用于当前页面，推荐直接定义到script标签中，管理更方便。

2）预编译模板

假设原始模板串已经定义好，并用tpl变量来引用，就可以通过下面的代码来预编译模板：

- Hide code

Mustache.parse(tpl);

要注意的是，经过预编译之后的tpl已经不再是原来的模板串了，连数据类型都变成数组类型了，这都是预编译的结果。

渲染模板

渲染方式很简单：

- Hide code

var htmlAfterRendered = Mustache.render(tpl1, obj);

obj引用的是一个数据源对象，mustache会把模板中那些属性标签，根据约定的规则，替换成对象的内容。htmlAfterRendered就是替换之后的字符串，你可以用它完成你需要的DOM操作。

流程渲染 if else foreach

if-else渲染2）for-each渲染

3）动态渲染

当prop属性所引用的是一个函数，并且这个函数的返回值还是一个函数的话，mustache会再次调用这个返回的函数，并给它传递2个参数：text表示原来的模板内容，render表示mustache内部的执行渲染的对象，以便在这个函数内部可以通过这render对象，结合原来的模板内容，自定义渲染的逻辑，并把函数的返回值作为渲染结果（这个返回值渲染的逻辑跟{{prop}}标签完全一样）：

Javascript模板引擎mustache.js详解 - 流云诸葛 - 博客园.html

Atitit 模板引擎总结目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el相关推荐

简单的html渲染模板引擎
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
pyecharts源码解读（10）渲染包render之templates目录：渲染模板
当前pyecharts版本为1.9.0 概述 render包结构 render包位于pyecharts包顶级目录中,用于渲染图表.render包结构如下: ├─render # 渲染设置包 │ │ d ...
python html模板引擎_flask入门2-模板引擎
day2模板模板引擎说明:模板文件就是按照一定的规则书写的展示效果的HTML文件模板引擎就是负责按照指定规则进行替换的工具模板引擎选择jinja2 一.渲染模板的方法将渲染的模板进行返回 r ...
js layui 模板属性添加_layui.laytpl--模板引擎文档
与一般的字符拼接不同的是,laytpl 的模板可与数据分离,集中把逻辑处理放在 View 层,提升代码可维护性,尤其是针对大量模板渲染的情况. layui.use('laytpl', function ...
2D游戏开发 - SkyGameEngine2d 引擎架构 | 目录结构 | 引擎入口点
2D游戏开发 - SkyGameEngine2d 引擎架构 | 目录结构 | 引擎入口点一.引擎架构二.引擎目录 2.1 src目录介绍三.项目目录四.引擎框架入口点分析 4.1 main.c ...
js渲染模板html,一个javascript模板渲染组件，laytpl
laytpl是一款颠覆性的JavaScript模板引擎,巧妙的实现方式,自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统js引擎的几乎所有功能.而值得一提的是他的大小不到2KB,轻巧好用: 当 ...
Java(SpringCloud) 使用Thymeleaf渲染模板，通过Mailgun发送邮件
好久没发博客了,忙东忙西的,坚持! 本文介绍Java使用Mailgun搭建发送邮件的服务. 我把这个邮件服务放在了我的springCloudApplication(微服务Demo)项目的utilser ...
苹果cms模板_泛目录站群神器，万词无限模板站群黑帽SEO程序
万词无限模板排名站群,端口站群,无限模板,关键词,可做百度搜狗360各大引擎. 100万流量利器,强悍无与伦比.无需任何推送,全自动收录,动态轮链池,内部有秒收课程+霸屏关键词技巧. 程序自带蜘蛛池功 ...
Python flask渲染模板注入
2018-TokyoWesterns-Web-shrine 参考链接: https://blog.csdn.net/Onlyone_1314/article/details/121875761 imp ...
webGL、webGPU、封装、渲染引擎 three.js、游戏引擎，定位是游戏开发，在前面的渲染引擎基础上，还提供了骨骼动画、物理引擎、AI、GUI 等功能，以及可视化编辑器来设计关卡，支撑大型游戏
https://zhuanlan.zhihu.com/p/162878354 如何选择 WebGL 框架和引擎? 知道得越多,不知道的就更多了数据可视化Sugar-百度智能云 cloud.ba ...

Atitit 模板引擎总结目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el

Atitit 模板引擎总结目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el相关推荐

最新文章

热门文章

Atitit 模板引擎总结 目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el

Atitit 模板引擎总结 目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el相关推荐

最新文章

热门文章

Atitit 模板引擎总结目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el

Atitit 模板引擎总结目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el相关推荐