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. Hdu 1025(LIS)

    Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  2. 如何成功安装旧版本火狐，成功安装firebug

    1.下载一个老版本火狐浏览器: 历史版本下载 2.下载安装完成后,立即在火狐浏览器的选项设置里面把自动更新关闭 3.手动安装firebug:最后搜到可以下载成功的地址:http://www.onlin ...

  3. [java]java构造器 标签： java面向对象 2017-06-11 11:16 195人阅读 评论(12)

    构造器这个概念,各种语言都有出现,虽然为了考试或者其他学了好多遍,但是自己一直不能理解这个概念,前几天又学了一遍,突然就明白了,下面随小编来一起学习一下吧. 什么是构造器? 在类别基础的面向对象程序设 ...

  4. 《2019上半年DDoS攻击态势报告》发布：应用层攻击形势依然严峻，海量移动设备成新一代肉鸡

    2019年上半年,阿里云安全团队平均每天帮助用户防御2500余次DDoS攻击,与2018年持平.目前阿里云承载着中国40%网站流量,为全球上百万客户提供基础安全防御.可以说,阿里云上的DDoS攻防态势 ...

  5. Adapter小练习

    Aapter的继承关系图: Android中Adapter的是数据和视图之间的桥梁,数据在adapter中做处理,然后显示到视图上面. 一.ArrayAdapter适配器 java代码: import ...

  6. git reset三种模式

    reset三种模式区别和使用场景 区别: --hard:重置位置的同时,直接将 working Tree工作目录. index 暂存区及 repository 都重置成目标Reset节点的內容,所以效 ...

  7. Leetcode783.Minimum Distance Between BST Nodes二叉搜索树结点最小距离

    给定一个二叉搜索树的根结点 root, 返回树中任意两节点的差的最小值. 示例: 输入: root = [4,2,6,1,3,null,null] 输出: 1 解释: 注意,root是树结点对象(Tr ...

  8. mysql中bigint、int、mediumint、smallint与tinyint的取值范围

    https://blog.csdn.net/github_39110707/article/details/74277381 mysql数据库设计,其中对性能优化,字段类型很重要,下面对bigint. ...

  9. SAS信用评分之番外篇异常值的识别

    SAS信用评分之番外篇异常值的识别 今天想分享给大家的是我早期建模的时候一个识别异常值的办法,也许你在"信用风险评分卡研究"看过,但是代码只能识别一个变量,我将这个代码作了改良,但 ...

  10. 小爬爬1:jupyter简单使用&&爬虫相关概念

    1.jupyter的基本使用方式 两种模式:code和markdown (1)code模式可以直接编写py代码 (2)markdown可以直接进行样式的指定 (3)双击可以重新进行编辑 (4)快捷键总 ...