模板引擎

什么是模板引擎

官方解释：“模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。”

看不懂

简单来说就是将业务逻辑层和显示层分开，通过引擎将数据与模板结合，再将结果显示出来。

举个栗子

你要写一个文章回复的页面，回复块的代码有很多地方需要填充数据（如：回复的人的信息，回复人的ID，回复内容，回复被点赞数…)

一般情况下实现的方法可能是通过字符串拼接将代码与数据拼接起来，然后添加到某一节点。但大量的标签字符串和数据拼接其实不美观，而且维护难。那么这个时候模板引擎的作用就体现出来了

模板引擎的使用

1. 模板引擎的引入

较好的一个是art-template

https://aui.github.io/art-template/

进入可下载 art-template 插件到本地，通过script标签引入，或者通过node.js安装

2. 自定义模板

2.1 根据需求写出代码

通过script标签定义模板 需要给模板定义一个ID，Id 为了关联数据和模板

type属性不能为空，也不能为js类，可写为 text/html , 如果有设置html高光，看起来会美观一些

    <script type="text/html"  id = "Tem"> // 一定需要这个ID,写在啊script标签上<ul class = "person"> <li>名字 ： </li><li>技能 ： </li><li>爱好 ： </li></ul></script>

2.2 预留位置

在需要填充数据的地方使用两个大括号预留位置，并且给这个位置取一个名字，放在两个括号中

    <script type="text/html" id = "Tem"><ul class = "person"><li>名字 ：{{name}} </li><li>技能 ：{{skill}} </li><li>爱好 ：{{habbit}} </li></ul></script>

2.3 创建数据对象或通过ajax获取数据对象

2.4 调用模板引擎的 template()方法填充数据

<script>   // 这里演示自己创建数据var data = {name: '哈哈',       // 注意属性名需要和预留位置的名字相同   skill: '笑',habbit: '傻笑'}// 调用 template方法//  template方法    将数据与模板关联，填充后返回，  会返回模板内的注释var res = template("Tem", data)   // 参数1: 模板ID  ,   参数2: 填充的数据// 此时res即为填充好的数据
</script>

注意：

无论是定义的模板，还是填充后返回的数据，都是字符串，可以通过转换成节点对象再appen，或者使用innerHTML 添加到目标节点下

目标引擎的数据填充过程不会对数据进行转义，可理解为是innerText填充，如果数据是标签需要在预留位置的名字前加上@符号

<div>{{@urlA}}</div>
<!-- 数据为 urlA = "<a href='www.baidu.com'>百度</a>" -->

目标引擎其他功能

1. 逻辑if

**使用 {{if key === value}} 模板（可全部可部分）{{/if}} **

如果 If 后的语句为真，着if内的模板块会被填充，然后返回，如果未假则不填充

**If可以跟有else if ,else **

 {{if name =='嘻嘻'}}        <!--  会判断传入数据的name是否等于‘嘻嘻，为真填充if内的模板块’  --><li>名字：{{name}}</li><li>身高：{{skill}}</li><li>年龄：{{habbit}}</li>{{/if}}                   <!--   结尾一定要有  -->{{else name == "呵呵"}}<li>名字：{{name}}</li><li>体重：{{weight}}</li><li>性别：{{gender}}</li>{{/else}}             <!--   结尾一定要有  -->

2. each 循环

使用模板引擎的 each 循环，可以循环填充某一个模板块，可以不用写很多遍相同的模板块，且动态填充

加入数据如下:

        var person = {name: '大娃',bro: ['二娃','三娃','四娃'],family:[{  name:'爷爷',skill:'被抓'},{name:'穿山甲',skill:'什么'}]}

使用each的模板

通过 {{each 数据}} 模板块 {{/each}}

 <script type="text/html" id='forTem'><ul><li>{{name}}</li><li>弟弟们<ul><!-- 循环语句，下标法 --><!-- <li>{{bro[0]}}</li><li>{{bro[1]}}</li>               <li>{{bro[2]}}</li> --><!-- each 循环  -->{{each bro}}              <!-- each 循环 标签，将循环数据放在后面 --><li>{{$index}} {{$value}}</li>  <!-- {{$index}} 索引  {{$value}} 值  -->{{/each}}                    <!-- each 标签尾， 必加 --></ul></li><li>家人们<ul>{{each family}<li>{{$value.name}}----{{$value.skill}}</li>  <!-- 对数组对象，循环对象时可使用 点方法取出属性 []方法不行 -->{{/each}}</ul></li></ul></script>

模板引擎基本原理即简单模拟

基本原理：其实是通过特殊的方法定义模板，获取模板后，一个正则表达式获取需要填充数据的位置，将数据填充，最后返回即可；

简单的模拟：

// 模板引擎函数
function myTem(id, data) {// 获取模板var Tem = document.querySelector("#"+id).innerHTML     // 注意模板内的注释也会获取// 检索需要填充的地方var reg = /{{(\w+)}}/;var res = reg.exec(Tem)   // 返回伪数组 第一个为{{name}}  第二个为 name,没有返回 null，while (res) {// 替换,如果有多个同名填充位，都会被填充Tem = Tem.replace(res[0], data[res[1]])// 再次检索res = reg.exec(Tem)}return Tem
}// 引入和使用
// <script src="./my-tem.js"></script>
// <script>
//     var data = {
//         'name': 'fupo',
//         'skill': 'rich'
//     }
//     myTem(ID,data)
// </script>

Javascript --- 模板引擎相关推荐

【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
13 款 JavaScript 模板引擎
JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
高性能JavaScript模板引擎原理解析
来源:http://cdc.tencent.com/?p=5723 随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascr ...
前端模板引擎artTemplate---高性能JavaScript模板引擎
关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为hard ...
JavaScript模板引擎Template.js基本使用详解
template.js是一款JavaScript模板引擎,提供一套模板语法,简单好用,开发者可以写一个模板区块,每次传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.官网:简洁语法版 htt ...
基于jQuery开发的javascript模板引擎-jTemplates
这里介绍一个基于jQuery开发的模板引擎. jTemplates目前最新的版本是0.7.8,由tPython开发.官方网站:http://jtemplates.tpython.com 两个附件,一个 ...
前端javaScript模板引擎之ArtTemplate
一.简介 ArtTemplate是腾讯开发的一款使用方便.性能卓越javascript模板引擎,其渲染效率极其快.ArtTemplate的库分为两种,一个是template.js,这个是简单的语法版本 ...
JavaScript模板引擎Template.js
template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https:// ...
if laytpl 非_laytpl : 一款非常轻量的JavaScript模板引擎
//假设你得到了这么一段数据 var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变.', list: [{name: '贤心', city ...
高性能JavaScript模板引擎template.js原理解析
点击有惊喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro ...

Javascript --- 模板引擎

模板引擎

什么是模板引擎

举个栗子

模板引擎的使用

1. 模板引擎的引入

2. 自定义模板

2.1 根据需求写出代码

2.2 预留位置

2.3 创建数据对象或通过ajax获取数据对象

2.4 调用模板引擎的 template()方法填充数据

注意：

目标引擎其他功能

1. 逻辑if

2. each 循环

使用each的模板

模板引擎基本原理即简单模拟

基本原理：其实是通过特殊的方法定义模板，获取模板后，一个正则表达式获取需要填充数据的位置，将数据填充，最后返回即可；

简单的模拟：

Javascript --- 模板引擎相关推荐

最新文章

热门文章

Javascript --- 模板引擎

模板引擎

什么是模板引擎

举个栗子

模板引擎的使用

1. 模板引擎的引入

2. 自定义模板

2.1 根据需求写出代码

2.2 预留位置

2.3 创建数据对象或通过ajax获取数据对象

2.4 调用模板引擎的 template()方法填充数据

注意：

目标引擎其他功能

1. 逻辑if

2. each 循环

使用each的模板

模板引擎基本原理即简单模拟

基本原理 ： 其实是通过特殊的方法定义模板，获取模板后，一个正则表达式获取需要填充数据的位置，将数据填充，最后返回即可；

简单的模拟：

Javascript --- 模板引擎相关推荐

最新文章

热门文章

基本原理：其实是通过特殊的方法定义模板，获取模板后，一个正则表达式获取需要填充数据的位置，将数据填充，最后返回即可；