juicer前端模板引擎

Juicer

中文文档:http://www.juicer.name/docs/docs_zh_cn.html
官网:http://juicer.name/

一个Javascript模板引擎的实现和优化(http://www.open-open.com/lib/view/open1335161835655.html)完全剥离html和代码逻辑,便于多人协作和后期的代码维护。
市面上众多的模板引擎,诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin。
“如无必要,勿增实体。” 这是著名的奥卡姆剃须刀法则,简单的说就是避免重复造轮子。

语法

a. ${变量}
支持自定义函数。(通过自定义函数你可以实现很多有趣的功能,类似 ${data|links} 就可以 通过事先定义的自定义函数 links 直接对 data 拼装出<a href=".." alt=".." /> ).

可以看得出,结果被转义了,如果我们上边使用 $${item|links} 就会得到我们预期的结果,这就是下边即将提到的避免转义。
var json = {
value: ‘<strong>juicer</strong>‘
};
var escape_tpl=‘${value}‘;
var unescape_tpl=‘$${value}‘;
juicer(escape_tpl, json); //输出 ‘&lt;strong&gt;juicer&lt;/strong&gt;‘
juicer(unescape_tpl, json); //输出 ‘<strong>juicer</strong>‘

{@each list as item,index}
{@if index===3}
the index is 3, the value is ${item.prop}
{@else if index === 4}
the index is 4, the value is ${item.prop}
{@else}
the index is not 3, the value is ${item.prop}
{@/if}
{@/each}

时间: 2024-10-10 15:09:52

juicer前端模板引擎的相关文章

前端模板引擎入门

模板引擎 模板引擎 起到 数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍,  java后台的模板引擎, freemark介绍,其图能很好标明这种关系. http://freemarker.org/ Apache FreeMarker is a template engine: a Java library to generate text output (HTML web pages, e

前端模板引擎arttemplate,后端模板引擎Nvelocity

It's my first blog 大家好,我叫曾岑,朋友们都叫我包子,今年21岁,湖北人,刚大学毕业,学的.net开发.去年一年,在南京工作了一年,那时候还没有拿到毕业证,找工作也是蛮难的,别人说没毕业证,也没经验,工资只能给个基础工资,不过还好,和几个朋友一起结伴去的,一起租的房子住的.在南京的工作经历就不说那么多了,至少让我看到了编程的这个世界. 今年7月份,辞掉了南京的工作,来到了深圳这个城市,重新开始找工作,运气还算不错,第二天就面试上了,第三天就正式上班了,工资待遇对于我这种新手来

前端模板引擎 超轻量

;(function(global ,undefined){ var cache = {} var sn = '_ret_' + new Date().toString(36) function etic(tplNode , data){ var tplId = tplNode.id || (tplNode.id = uuid()) function cbk(){ return data ? cache[tplId].call(data) : cache[tplId] } if (cache[t

Smarty前端模板引擎 - 我看过的PHP开源框架

Smarty Smarty可以说是我接触PHP这门语言用到的第一个开源框架,当时在Smarty的帮助下,很好地完成了项目的开发,也很好地遵循了MVC的模式.但是到了后来,慢慢地发现,很多人都很熟悉Smarty,但是都不愿意使用它.大概的原因在于:慢. 当初以为Smarty很神奇,到后来发现也是通过PHP来实现的.再到后来别人反映使用Smarty会影响性能,所以也就想深入了解一下它的源代码,看下它是怎么实现的,是不是真的会慢? 其实,Smarty只是用PHP做了一个中间层,来把自定义的一些模板标签

前端模板引擎汇总

1. 本文所指的模板引擎是指用在传统的jquery项目中,所以和  Vue.react 项目本身就没有可比性,模板引擎本身也只是做数据的渲染和简单的逻辑处理,想有其他的功能那就直接用 Vue .react好了 2. 模板引擎就和其他的类库框架一样有很多种,本文只列出适合我自己的或是比较流行的几个 一.hogan.js 1. 语法最简单,只做数据渲染,没有逻辑处理,出自 推特 2. 官网:https://twitter.github.io/hogan.js/      github:https:/

Mustache.js前端模板引擎初识

目前在看一个项目,在一遍遍撸代码的时候,发现代码里调用了一个Mustache.render()方法. 经过百度后,发现Mustache.js是一套轻量级模板引擎. 所以现在就要仔细学习一下,它是如何工作的. 一般来说mustache在js中的使用方法都是如下: var template = $('#template').html(); Mustache.parse(template);   // optional, speeds up future uses var rendered = Mus

Mustache.js前端模板引擎源码解读【二】

上一篇解读完解析器的代码,这一篇就来解读一下渲染器. 在之前的解读中,解读了parseTemplate如何将模板代码解析为树形结构的tokens数组,按照平时写mustache的习惯,用完parse后,就是直接用 xx.innerHTML = Mustache.render(template , obj),因为此前会先调用parse解析,解析的时候会将解析结果缓存起来,所以当调用render的时候,就会先读缓存,如果缓存里没有相关解析数据,再调用一下parse进行解析. Writer.proto

art template前端模板引擎

偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template('detail', {data: data.data, shstatus: status}); artDialog({ content: '<div id="vorder_detail">' + html + '</div>', lock: true, fixed:

学习前端模板引擎 jade (一)

一.为什么要学习jade? 通常大部分前端开发工作者一开始步入前端开发的时候,都是直接简单的写html页面然后丢给后台开发,后台开发在来嵌入模版. 对于日益庞大的前端页面来说,还是用老的字符串拼接的方法来嵌入html内容已经不适应当下的开发趋势了. 废话不多说,直接切入正题. 二.开始装jade. jade基于nodejs的开发环境,所以我们首先要安装nodejs,nodejs的安装方法其实还是挺复杂的,所以请大家自己去百度或者google,省事可以直接去nodejs的官方网站下载nodejs的