世界上最好用的纯前端模板【没有之一】,AceTemplate高调亮相。
http://code.google.com/p/ace-engine/wiki/AceTemplate
概述
随着Ajax技术的普及,纯前端模板的使用频率越来越高。我们需要一个易学、易用、高性能的模板系统来处理日益繁杂的需求变化。
前端模板处理,有90%以上的情况都是在处理html相关字符串,针对这一特性我们设计了一种只包含html和js两种语法的模板系统AceTemplate。
对于前端开发者,html和js是无需额外的学习成本。
特点
- 易学(只需html和js基础),易用(最少的输入)
- 智能(自动识别语法、标识符)
- 扩展便捷
语法
以行为单位,分为两种html行和js行,自由穿插
判断是否为html行的规则
- 特殊字符开头;
示例:
汉字、#{value}、<div>
- Html标记结尾;
示例:
>、src="1.gif" />
- 没有“双引号、单引号、分号、逗号,大小括号”,不是else等单行语句;
示例:
hello world
- Html属性;
示例:
a="12"、a='ab' b="cd"
- 样式表达式。
示例:
div.focus{color: #fff;}、#btnAdd span{}
html行负责输出内容
两种表达式输出;#{表达式}和!#{表达式}
#{表达式} 采用html字符串编码输出,默认规避xss漏洞
!#{表达式} 采用原文字符串编码输出
js行负责逻辑处理
方法
format
格式化输出
/*** 格式化输出* @param {String|Element} id 模板ID或是模板本身(非标识符将识别为模板本身)* @param {Object} data 格式化的数据* @param {Object} helper 附加数据(默认为模板对象)*/ AceTemplate.format = function(id, data, helper)
register
注册模板
/*** 注册模板,如果没有参数则是注册所有script标签模板* @param {String} id 模板ID* @param {Element|String} target 模板对象或者是模板字符串,如果没有则默认获取id对应的DOM对象*/ AceTemplate.register = function(id, target)
unregister
注销模板
/*** 注销模板* @param {String} id 模板ID*/ AceTemplate.unregister = function(id)
例子
输入输出用例
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/case.html
调试:http://jsfiddle.net/zswang/hA7Jd/
- 集中测试。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="../../scripts/ace-template.js"></script><title>ace template examples</title><style type="text/css">#log{width: 600px;height: 400px;}</style></head><body><textarea id="log"></textarea><script id="t1" type="text/template">if (this["title"]) {#{title}}else{<b>无</b>}</script><script>(function() {var log = document.getElementById("log");var list = [{input: ["#{this}", "<b>b</b>"],output: "<b>b</b>"},{input: ["!#{this}", "<b>b</b>"],output: "<b>b</b>"},{input: ["#{title}#{size}", {title: "t"}],output: "t"},{input: ["#{title}#{size + 2}", {title: "t"}],error: true},{input: ["#{1 + 2 + 3 + 4}"],output: "10"},{input: ["t1"],output: "\t\t\t\t<b>无</b>\n"}];var message = [];for (var i = 0; i < list.length; i++) {var item = list[i];try {var output = AceTemplate.format(item.input[0], item.input[1]);if (output == item.output) {message.push("√" + i + "输出结果符合预期。");} else {message.push("×" + i + "输出结果不符合预期。-- " + output);}} catch(ex) {if (item.error) {message.push("√" + i + "异常符合预期。");} else {message.push("×" + i + "异常不符合预期。-- " + ex.message);}}}log.value = message.join("\n");})();</script></body> </html>
示例普通循环用法
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/base1.html
调试:http://jsfiddle.net/zswang/S3rwL/
- 模板中的this代表数据本身,即format的data参数;
- 逻辑部分用js,输出部分用html,#{表达式}为变量替换。
示例和jquery混用
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/base2.html 调试:http://jsfiddle.net/zswang/dehd6/
- 逻辑部分和输出部分将编译成一个完整的js函数块。
示例默认防止XSS漏洞
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/secuity1.html
调试:http://jsfiddle.net/zswang/aXKQA/
- 输出表达式默认采用html编码;
- 也可以使用!#{表达式}输出原文。
示例嵌套模板
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/nesting1.html
调试:http://jsfiddle.net/zswang/YJWZA/
- 模板中helper是一个附加参数,默认指AceTemplate本身;
- 采用不编码输出另一个模板渲染结果既实现嵌套。
示例递归模板
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/recursion1.html
调试:http://jsfiddle.net/zswang/JcwHg/
- 模板中可以调用自身递归输出。
示例关键词
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/keyword.html
调试:http://jsfiddle.net/zswang/fvLX3/
- 使用html编码输出可以这样:AceTemplate.format("#{this}", text);
- 通过helper参数,加入keyword方法
作者微博
http://weibo.com/zswang http://weibo.com/zinkey
世界上最好用的纯前端模板【没有之一】,AceTemplate高调亮相。相关推荐
- Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
- 后台管理系统纯前端模板
分享一个个人学习前端写过的模板,简单.高效.好用. 下载链接: https://download.csdn.net/download/qq_51701007/87109342https://downl ...
- 抖音上传视频(纯前端实现霸屏软件的功能)进店转发视频功能,详情搜索抖音霸屏软件
抖音霸屏软件 抖音霸屏介绍 先来介绍一下吧,嫌啰嗦的可以直接跳转>>>思路分析 ↓ 抖音开发文档 思路分析 步骤 抖音霸屏介绍 先来介绍一下吧,嫌啰嗦的可以直接跳转>>& ...
- shp文件纯前端的上传、解析、编辑、下载
本文主要讲述一种体量较小的shp文件纯前端的上传.解析.编辑.下载的技术流程,适用于要素量少的shp文件修改操作. 准备工作 下载一下几个包,详细用法请见结尾参考. npm install file- ...
- 关于纯前端excel上传、下载功能
工作项目中,表格的上传下载基本都是调取后端接口,把处理逻辑放在后端进行处理.那么纯前端js代码实现excel的上传下载是否可行?其实代码逻辑很简单,不过需要引用xlsx.js进行处理.下面是我自己写的 ...
- 纯前端实现图片上传功能
纯前端实现图片上传功能,告别后端formData上传 使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能 了解了upload的基本属性之后我们要开始上硬菜了 使用ElementU ...
- 纯前端网站的上传(3free免费空间)教程
纯前端网站的上传(3free免费空间)教程 一.8u-ftp 首先下载一个8UFTP,安装好之后先不用管. 二.3free 1.打开3free的官网,点击注册. 2.姓名那可以随便填 3.之后点击激活 ...
- 28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形 原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: < ...
- 纯前端实现人脸检测,并给你的头像戴上口罩!
本文来自社区投稿与征集,作者 Howard Zhang,东华大学研究生在读,中科院计算所客座学生. 本文转自:https://zhuanlan.zhihu.com/p/104070435 根据春节的起 ...
最新文章
- STM 32 窗口看门狗
- 关于机器学习的训练数据、验证数据和测试数据的形象比喻
- 开机explorer无法启动,无法进入桌面
- vue-cli3中安装lib-flexible和px2rem
- java string 内存占用_JVM系列之:String,数组和集合类的内存占用大小
- Flex +WebService
- 寻找相同的乱序字符串
- Echarts数据可视化parallel平行坐标系,开发全解+完美注释
- 关于在ubuntu14.04下firefox升级后refresh插件不好用
- 生活广场远程预付费电能管理系统的设计与应用
- mysql字段描述_详细的MySQL字段类型描述
- win10计算机删除了怎么恢复,Win10系统删除的文件怎么恢复?
- 手把手系列!大规模预训练语言模型
- BCD码指令 AAA DAA AAS DAS AAM AAD
- Android 实现顶层窗口、悬浮窗口
- 数据可视化什么意思?
- 十月3倍销量于特斯拉的比亚迪,新增量在何处?
- 【CISSP】安全运营
- 建tcode維護自己創建的數據表(SE54/SM30)
- WPS 无法覆盖选中文字