artTemplate:

template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。

1、特性

（1）、性能卓越，拥有接近 JavaScript 渲染极限的的性能, 执行速度通常是 Mustache 的 20 多倍（性能测试）

（2）、调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）

（3）、对 NodeJS Express 、Koa、Webpack友好支持

（4）、支持模板继承与子模板

（5）、支持include语句

（6）、可在浏览器端实现按路径加载模板（详情）

（7）、支持预编译，可将模板转换成为非常精简的 js 文件

（8）、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选

（9）、支持所有流行的浏览器

2、语法

原生语法: ①引入插件文件：

<script src="template-native.js"> </script>

② 逻辑表达式：<% %> 输出表达式：<%= content %>---输出是字符串 里面可以写js代码、变量、判断...

简洁语法:

（1）、使用

引用简洁语法的引擎版本，例如： <script src="dist/template.js"></script>

（2）、表达式

{{ }} 符号包裹起来的语句则为模板的逻辑表达式。

（3）、输出表达式

对内容编码输出： {{content}} 不编码输出： {{#content}} 编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

（4）、条件表达式

{{if admin}}

·<p> admin </p>

{{else if code > 0}}

· <p>master</p>

{{else}}

· <p>error!</p>

{{/if}}

（5）、遍历表达式

无论数组或者对象都可以用 each 进行遍历。

{{each list as value index}}
   <li>{{index}} - {{value.user}}</li>
{{/each}}

可以被简写为：

 {{each list}}
    <li> {{$index}} - {{$value.user}} </li>
 {{/each}}

（6）、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}

子模板默认共享当前数据，亦可以指定数据：{{include 'template_name' news_list}}

3、使用:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/template.js" ></script>
    </head>
    
    <body>
        
        <div id="container"></div>
        
        
        // 模版
        <script type="text/html" id="div">
            <h1>{{name}}</h1>
            <ul>
                {{each lang}}
                <li>语言:{{$value.title}} 定义:{{$value.add}}</li>
                {{/each}}
            </ul>
        </script>
        
        
　　　　// 数据
        <script type="text/javascript">
            var data = {
                name:"前端语言",
                lang:[{
                    title:"html",
                    add:"超文本标记语言"
                },{
                    title:"css",
                    add:"层叠样式表"
                },{
                    title:"javaScript",
                    add:"添加动态特效"
                }]
            }
            var html = template('div',data);
            document.getElementById("container").innerHTML = html;
        </script>
    </body>
</html>

注意：在模板中，只能使用json对象，而不能使用json数组，因为art-template里只能获取json对象里的属性。

artTemplate模版引擎的使用的更多相关文章

  1. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  2. 使用模版引擎填充重复dom元素

    引入arttemplate,定义newajax发送跨域请求获得数据,将获得的数据用定义的格式渲染 <!DOCTYPE html><html lang="en"&g ...

  3. Art-Template模板引擎（原生写法与简洁写法）

    模板引擎:把js数据转换成html需要的页面,这就是模板引擎需要做的事     • native原生语法     1. 准备数据     2. 把数据转化成html格式的字符串 使用模板引擎 artT ...

  4. 构建自己的PHP框架--构建模版引擎(1)

    前段时间太忙,导致好久都没有更新博客了,今天抽出点时间来写一篇. 其实这个系列的博客很久没有更新了,之前想好好规划一下,再继续写,然后就放下了,今天再捡起来继续更新. 今天我们来说一下,如何构建自己的 ...

  5. Smarty模版引擎的原理

    Smarty是一个使用php写出来的模版引擎,用来将原本与html代码混杂在一起PHP代码逻辑分离,实现前后端分离. Smarty模板优点: 1. 速度:采用Smarty编写的程序可以获得最大速度的提 ...

  6. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  7. 简单JavaScript模版引擎优化

    在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...

  8. Symfony2模版引擎使用说明手册

    一.基本使用 {{ demo }}输出一个demo变量; {% func %}通常是包含一个twig函数例如 for; 举个for循环的例子: {% for i in 0..10 %} <em& ...

  9. Asp.net NVelocity 模版引擎

    NVelocity.dll是Java中常用的一个模版,下面是常用的模版引擎 1,返回string类型的html代码 /// <summary> /// 获取html模版 /// </ ...

随机推荐

  1. ML面试1000题系列（51-60）

    本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 51.简单说下sigmoid激活函数 常用的非线 ...

  2. HTML 实体字符

    有些字符,像(<)这类的,对HTML来说是有特殊意义的,所以这些字符是不允许在文本中使用的.要在HTML中显示(<)这个字符,我们就必须使用实体字符. 实体字符 有一些字符对HTML来讲是 ...

  3. 会话技术之cookie（记录当前时间、浏览记录的记录和清除）

    cookie 会话技术: 当用户打开浏览器的时候,访问不同的资源,直到用户将浏览器关闭,可以认为这是一次会话. 作用: 因为http协议是一个无状态的协议,它不会记录上一次访问的内容.用户在访问过程中 ...

  4. 【模板】树的重心 洛谷P1364 医院设置

    P1364 医院设置 题目描述 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接 ...

  5. BZOJ1076奖励关题解

    链接 很容易想到状压,f[i][s]表示前i个选择的箱子集合为s的最大期望 果断wa了,因为有一些不合法的状态,譬如f[1][1111001]这样的状态 这样的状态不好排除,所以改用倒推 用f[i][ ...

  6. Microsoft: Get started with Dynamic Data Masking in SQL Server 2016 and Azure SQL

    Dynamic Data Masking (DDM) is a new security feature in Microsoft SQL Server 2016 and Azure SQL DB. ...

  7. 使用JS如何消除一个数组里重复的元素

    JS: var arrData = [1,3,5,7,7,8,9,3,10,8,"sdsdsds","sss","ffff","s ...

  8. java8的stream系列教程之filter过滤集合的一些属性

    贴代码 List<Student> lists = new ArrayList<>(); Student student = new Student(); student.se ...

  9. jmeter的运行原理和测试计划要素

    jmeter运行原理 1.jmeter运行在JVM虚拟机上,jmeter是以线程的方式运行的. 2.jmeter通过线程组来驱动多个线程,运行测试脚本对被测试服务器发起负载,每一个负载机上够可以运行多 ...

  10. codevs1839 洞穴勘测

    题目描述 Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道 ...