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. Django用户登陆以及跳转后台管理页面1

    """S14Djngo URL Configuration The `urlpatterns` list routes URLs to views. For more i ...

  2. 从0开始学习 GitHub 系列之「04.向GitHub 提交代码」

    之前的这篇文章「从0开始学习 GitHub 系列之「Git速成」」相信大家都已经对 Git 的基本操作熟悉了,但是这篇文章只介绍了对本地 Git 仓库的基本操作,今天我就来介绍下如何跟远程仓库一起协作 ...

  3. 苹果审核不通过，程序/游戏不兼容IPV6网络

    最近苹果升级的IOS10,所以那边网络环境变成IPV6,如果你的程序不兼容IPV6,苹果的程序会以这个不兼容的原因驳回审核. 那么如何让自己的程序兼容这个?方法其实C#本来已经提供给你的,而且很简单, ...

  4. Codeforces Round #189 (Div. 2) A. Magic Numbers【正难则反/给出一个数字串判断是否只由1,14和144组成】

    A. Magic Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  5. MaxCompute推出面向开发者的专属版本，普惠大数据开发者

    3月20号,阿里云正式对外宣布推出MaxCompute产品的新规格-开发者版.MaxCompute开发者版是阿里云大数据计算服务发布的开发者专属版本.区别于原有的按量付费.按CU预付费规格,开发者版是 ...

  6. 基于jQuery，bootstrap的bootstrapValidator的学习（一)

    bootstrap:能够增加兼容性的强大框架. 因为移动端项目需要数据验证,就开始学习了bootstrapValidator . 1.需要引用的文件: css: bootstrap.min.css b ...

  7. DTcms设置 IIS6.0设置url重写导致editor上传全部失效

    1.修改iis的重写规则为htm 2.修改后台后缀为htm 解决

  8. Thread class vs Runnnable interface（转）

    http://developer.51cto.com/art/201203/321042.htm Thread(Runnable target) Allocates a new Thread obje ...

  9. 什么是PV UV

    PV是网站分析的一个术语,用以衡量网站用户访问的网页的数量.对于广告主,PV值可预期它可以带来多少广告收入.一般来说,PV与来访者的数量成正比,但是PV并不直接决定页面的真实来访者数量,如同一个来访者 ...

  10. 安装tomcat(fedora16)

    sudo yum install tomcat6 sudo yum install tomcat6-webapps sudo yum install tomcat6-admin-webapps   s ...