首页 > 代码库 > Epii.js 一个极其简单的Js模板引擎
Epii.js 一个极其简单的Js模板引擎
Epii.js 简约而不简单的JavaScript模板引擎
项目地址
https://github.com/epaii/epii.js
极低门槛，拿来即用，别忘记star
特性
- 一个轻量级模板引擎，可快速实现数据与ui绑定（数据变动，UI自动变动），快速实现事件绑定和处理，不依赖任何第三方库,仅仅8k。
- 可快速应用于web开发,native+webapp开发,h5微网页开发,不与其它框架冲突。
- 让开发者更多关注与应用本身，而不用花费大量时间实现数据与ui的，和事件处理。效率大幅度提升。
名字由来
自然数e，圆周率π，虚数单位i，三者合在一起组成 epii。文档目录
- 如何使用，并写出第一个程序
- 数据与模板的绑定
- 变量的解析(基础)
- 变量的解析(高级)
- 节点的隐藏和显示
- 事件
- 列表
- 基础列表
- 列表(多模板)
- 列表(追加数据)
- 列表(空数据)
- 数据的获取
第一个程序
1.下载 epii.min.js,并在网页中引用
<script src="path/to/epii.min.js"></script>
2.编写一个最简单模板
<body> <div id="content"> <span r-data=http://www.mamicode.com/‘{hi}‘ style=‘font-size:{font}‘>>
3.使用epii(dom)方法初始化epii对象
var myepii = epii(document.getElementById("content"))//初始化epii对象，需要指定dom节点 可以是 document.body
4.数据与模板绑定
var myepii = epii(document.getElementById("content"));//初始化epii对象，需要指定dom节点 可以是 document.body myepii.setData({ hi: "hello epii.js", font: "50px" }); setTimeout(function () { myepii.setData({ font: "100px" }); },3000);//3秒后数据变动，ui自动变动
点击查看效果demo1.html
变量的解析（基础）
特性(重点)
- 变量在模板中一般用 {} 表示。如{a},{b}
- 变量只能在dom标签属性中使用。如 style="width:{width}"
- r-data 标签是epii.js自定义最重要的一个标签。一般用来赋值。
<input>标签将用于赋予 value 属性值。<img>标签将用于赋予 src 属性值。<div> <span> <p> 等其它标签将用于赋予 innerHTML 属性值。
- r-data-default 标签，是当r-data标签值得变量在没有数据时候显示默认值。
r-data="http://www.mamicode.com/title"和r-data="http://www.mamicode.com/{title}"的区别是，在title值不存在时，第一种情况 将显示 title 字符串，第二种情况 显示空，如果第二种情况设置了r-data-default 则显示其设置的默认值。
示例
<div id="content"> <span r-data=http://www.mamicode.com/‘您好，我是{name}‘ style=‘font-size:{font}‘>"background-color: {bgcolor}"> 我的Logo是:<br><img r-data="http://www.mamicode.com/logo_img"> </div> <span r-data="http://www.mamicode.com/{subject}" r-data-default="默认的简介：我叫：{name}"></span> <p > 成立于：<input r-data="http://www.mamicode.com/{time}"> </p></div><script> var myepii = epii(document.getElementById("content"));//初始化殷勤，需要制定dom节点 可以是 body myepii.setData({ name: "epii.js", font: "50px", logo_img: "https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg", bgcolor: "red", time: "2017-06-22" }); setTimeout(function () { myepii.setData({ subject: "我的简介是：Epii.js 简约而不简单的JavaScript模板引擎", bgcolor:"#999999" }); },3000);</script>
点击查看效果demo2.html
变量的解析（高级）
- 支持链条式变量，如{info.name},{info.user.sex}
- r-data 可定义变量空间。可大幅度简化变量写法。
未使用变量空间的写法
<!-- 不设置空间的写法--><div> <p>title:<span r-data="http://www.mamicode.com/{info.title}" style="color:{info.title_color}"></span></p> <p>subject:<span r-data="http://www.mamicode.com/{info.subject}"></span></p> <div> 作者信息: name:<span r-data="http://www.mamicode.com/{info.author.name}"></span>,sex:<span r-data="http://www.mamicode.com/{info.author.sex}"></span> </div> </div><div><div>
设置空间的写法
<!--r-data 设置变量空间 设置空间为 info,在空间内部 info.title 直接写 title就可以 的写法--><div r-data="http://www.mamicode.com/{info}" style="background: cadetblue"> <p>title:<span r-data="http://www.mamicode.com/{title}" style="color:{title_color}"></span></p> <p>subject:<span r-data="http://www.mamicode.com/{subject}"></span></p> <div r-data="http://www.mamicode.com/author"> 作者信息: name:<span r-data="http://www.mamicode.com/name"></span>,sex:<span r-data="http://www.mamicode.com/{sex}"></span> </div></div>
全部代码
<div id="content"> <!-- 不设置空间的写法--> <div> <p>title:<span r-data="http://www.mamicode.com/{info.title}" style="color:{info.title_color}"></span></p> <p>subject:<span r-data="http://www.mamicode.com/{info.subject}"></span></p> <div> 作者信息: name:<span r-data="http://www.mamicode.com/{info.author.name}"></span>,sex:<span r-data="http://www.mamicode.com/{info.author.sex}"></span> </div> </div> <!--r-data 设置变量空间 设置空间为 info,在空间内部 info.title 直接写 title就可以 的写法--> <div r-data="http://www.mamicode.com/{info}" style="background: cadetblue"> <p>title:<span r-data="http://www.mamicode.com/{title}" style="color:{title_color}"></span></p> <p>subject:<span r-data="http://www.mamicode.com/{subject}"></span></p> <div r-data="http://www.mamicode.com/author"> 作者信息: name:<span r-data="http://www.mamicode.com/name"></span>,sex:<span r-data="http://www.mamicode.com/{sex}"></span> </div> </div></div><script> var myepii = epii(document.getElementById("content"));//初始化殷勤，需要制定dom节点 可以是 body myepii.setData({ info: { title: "epii.js 简介", title_color:"red", subject: "epii.js 简约而不简单的JavaScript模板引擎", author: { name: "MrRen", sex: "男" } } }); setTimeout(function () { myepii.setData({ info: { title: "epii.js 新的简介" } }); }, 3000);</script>
点击查看效果demo3.html
节点的隐藏和显示
epii.js 提共两种方式设置dom节点隐藏和显示。
- 方法1
style="display: {h1_display}"通过style属性来控制。 - 方法2 通过
r-display标签来设定。r-display="{img_show}-1==0"，必须为bool 等式字符串 ，推荐使用这种方式 - 两种方法都支持变量空间
<div id="content"> <h1 r-data="http://www.mamicode.com/title" style="display: {h1_display}"> <!--第一种方法，直接在style中 用变量，不推荐--> </h1> <br> <img r-data="http://www.mamicode.com/img_url" r-display="{img_show}-1==0"><!--第二种方法，使用 r-display 标签，推荐--></div><script> var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body myepii.setData({ title: "我是标题", h1_display:"block", img_url:"https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg", img_show:1 }); setTimeout(function () {//两种方法隐藏 myepii.setData({ h1_display:"none", img_show:0 }); }, 3000);</script>
点击查看效果demo4.html
事件
- 1、dom 事件，仍可通过常规设置来实现，如
onclick="fun(‘{name}‘,‘{age}‘)"onblur="myblur(‘{name}‘,‘{age}‘)" - 2、epii.js 自定义
r-click-change和r-click-function两个标签来处理 点击跳转 和点击执行函数事件（这两种事件占比最高）。 - 3、
r-click-change标签设置点击跳转链接。 如r-click-change=‘http://www.baidu.com?name={name}‘ - 4、
r-click-function标签设置点击执行函数。 如r-click-function="on_subject_click#{info.subject}#{title}",这种写法和onclick="on_subject_click(‘{info.subject}‘,‘{title}‘)"实现效果一样，推荐使用前者。 - 5、* onclick，r-click-change，r-click-function * 同一节点不可重复使用
<div id="content"> <h1 r-data="http://www.mamicode.com/title" r-click-change="{baidu_link}"> </h1> <br> <img r-data="http://www.mamicode.com/img_url" r-click-function="{imgclick}#{title}#{img_url}"></div><script> var myepii = epii(document.getElementById("content")); myepii.setData({ title: "点我跳转到百度", baidu_link: "http://www.baidu.com", img_url: "https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg", imgclick: "myfunction" }); function myfunction(title, img_url) { console.log(this.src);//this is dom itself console.log(title); console.log(img_url); }</script>
点击查看效果demo5.html
自定义跳转事件
通过
epii.setClickToChangeFunction(f);来自定义r-click-change事件， 在native+webapp开发中 一般需要不会直接通过location 页面跳转，而是需要处理自定义协议。
<div id="content"> <h1 r-data="http://www.mamicode.com/title" r-click-change="baidu://?a=1&b=2"></h1></div><script> //自定义r-click-change 处理事件， 在native+webapp开发中 一般需要自定义协议 epii.setClickToChangeFunction(function (url) { console.log(url); }); var myepii = epii(document.getElementById("content")); myepii.setData({ title: "我是 Epii.js" });</script>
点击查看效果demo6.html
列表
基础
epii.js 通过自定义标签
r-list来设置此dom节点将显示列表， 在列表节点内的 变量 将自切换为 列表某一项数据。
支持多级列表展示
<div id="content"> <h1 r-data="http://www.mamicode.com/title" > </h1> <div r-list="users"> <div>名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> </div></div><script> var myepii = epii(document.getElementById("content")); myepii.setData({ title: "列表展示", users:[ {name:"张三",age:"12岁"}, {name:"李四",age:"14岁"} ] });</script>
点击查看效果demo7.html
多模板
如果列表中有多个模板，则根据
r-display来自动选择对应的模板,
<div id="content"> <h1 r-data="http://www.mamicode.com/title" > </h1> <div r-list="users"> <div r-display="{item_type}-1==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> <div r-display="{item_type}-2==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> </div></div><script> var myepii = epii(document.getElementById("content")); myepii.setData({ title: "列表展示", users:[ {name:"张三",age:"12岁",item_type:1}, {name:"李四",age:"14岁",item_type:2}, {name:"张三1",age:"121岁",item_type:1}, {name:"李四1",age:"141岁",item_type:2} ] });</script>
点击查看效果demo8.html
追加数据
- epii 可两种方式对列表追加数据
- 方法1 ，重新 setData, 将重新显示列表所有数据，如果旧数据有改变，则用这种方法 。
- 方法2 ， addData ，已有数据不变，追加数据，如果旧数据没有任何改变，推荐使用这种方式 。
<div id="content"> <h1 r-data="http://www.mamicode.com/title" > </h1> <div r-list="users"> <div r-display="{item_type}-1==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> <div r-display="{item_type}-2==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> </div></div><script> var myepii = epii(document.getElementById("content"));//初始化引擎，需要指定dom节点 可以是 body myepii.setData({ title: "列表展示", users:[ {name:"张三",age:"12岁",item_type:1}, {name:"李四",age:"14岁",item_type:2}, {name:"张三1",age:"121岁",item_type:1}, {name:"李四1",age:"141岁",item_type:2} ] }); setTimeout(function () {//3秒后追加列表 myepii.addData({ //追加已有数据，列表将被追加，其它类型直接覆盖 title: "追加列表展示", users:[ {name:"张三5",age:"12岁",item_type:1}, {name:"李四6",age:"14岁",item_type:2}, {name:"张三7",age:"121岁",item_type:1}, {name:"李四8",age:"141岁",item_type:2} ] }); },3000);</script>
点击查看效果demo9.html
空数据
通过
r-empty="1"设置当数据为空，或者未设置时候列表的样式 。
<div id="content"> <h1 r-data="http://www.mamicode.com/title" > </h1> <div r-list="users"> <div r-display="{item_type}-1==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> <div r-display="{item_type}-2==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> <div r-empty="1" style="没有数据的时候显示</div> </div></div><script> var myepii = epii(document.getElementById("content")); myepii.setData({ title: "列表展示", users:[] }); setTimeout(function () { myepii.addData({ //追加已有数据，列表将别被加，其它类型直接覆盖 title: "追加列表展示", users:[ {name:"张三5",age:"12岁",item_type:1}, {name:"李四6",age:"14岁",item_type:2}, {name:"张三7",age:"121岁",item_type:1}, {name:"李四8",age:"141岁",item_type:2} ] }); },3000);</script>
点击查看效果demo10.html
数据获取，获取已设置的数据
getData,getDataValue两个方法
特性
- 通过
epii.js的getData方法 可以获取所有设置的数据 - 通过 epii的
getDataValue方法 可以快速获取已设置的数据，getDataValue支持多参数，链条key - 如
myepii.getDataValue("title");myepii.getDataValue("info","subject");myepii.getDataValue("users",1,"age")
<div id="content"> <h1 r-data="http://www.mamicode.com/title" > </h1> <div r-list="users"> <div r-display="{item_type}-1==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> <div r-display="{item_type}-2==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div> </div></div><script> var myepii = epii(document.getElementById("content")); myepii.setData({ title: "获取数据", info:{subject:"标题"}, users:[ {name:"张三",age:"12岁",item_type:1}, {name:"李四",age:"14岁",item_type:2}, {name:"张三1",age:"121岁",item_type:1}, {name:"李四1",age:"141岁",item_type:2} ] }); console.log(myepii.getData()); alert(myepii.getDataValue("title")); alert(myepii.getDataValue("info","subject")); alert(myepii.getDataValue("users",1,"age"));</script>
点击查看效果demo11.html
一个复杂的demo，几乎涉及所有语法
<div> <div r-data="http://www.mamicode.com/我的名字是{name}，性别:{sex}" r-click-function="index#{name}#{sex}"> </div> <div r-click-change="http://www.baidu.cc/?a={name}">click_to_change</div> <div r-data="http://www.mamicode.com/show_name" r-display="{isshow}-1==0" style="background-color: green"> </div> <div r-data="http://www.mamicode.com/{hebei}" r-data-default="默认值{name}" style="width:{width}px;height:{height}px;display: {display}" > </div> <div r-data="http://www.mamicode.com/{map.age}" r-display="{map.show}-1==0" > </div> <img r-data="http://www.mamicode.com/{img_url}" >  <input type="text" r-data="http://www.mamicode.com/{img_url}" > <input type="text" value="http://www.mamicode.com/{img_url}" > <div r-list="list" style="background-color: #007bc7"> <span r-data="http://www.mamicode.com/name" r-display="{moban}-1==0"></span> <span r-data="http://www.mamicode.com/name" style="color: red" r-display="{moban}-2==0" r-click-change="http://www.ddle.cc/?a={age}"> </span> <div r-display="{moban}-3==0" r-click-function="index#2#{age}"> <div> 二级列表：</div> <div r-list="wanju"> <span r-data="http://www.mamicode.com/name" r-display="{moban}-1==0"></span> <span r-data="http://www.mamicode.com/name" style="color: blue" r-display="{moban}-2==0" r-click-change="http://www.ddle.cc/?a={a}"> </span> </div> </div> <span r-empty="1"> 真的没有数据 </span> </div></div> <script> epii.setClickToChangeFunction(function (url) { alert(url); }); function index(c, b) {//this bind to uiview console.log(this.innerHTML); console.log(c); console.log(b); } var data =http://www.mamicode.com/ { "img_url":"https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg", "display":"block", "width":100, "height":200, "bgcolor":"red", "name": "张三", "sex": "男", "isshow": 1, "show_name": "show/hide", "map":{"show":"1","age":"map_age"}, "list": [{"name": "list_item_1", "moban": 1}, {"name": "list_item_2", "moban": 2, "age": 2}] }; var myepii = epii(document.body); myepii.setData(data); //模拟数据变化 setTimeout(function () { myepii.setData({//改变已有数据 "hebei":"河北邯郸", "name": "李四", "sex": "女", "map":{"show":"0","age":"map_age1"}, "bgcolor":"blue", "width":500, "height":50, isshow: 0 }); setTimeout(function () { myepii.addData({//追加已有数据，列表将被追加，其它类型直接覆盖 "hebei":"河北石家庄", "display":"none", "list": [ {"name": "list_item_3", "moban": 1}, {"name": "list_item_4", "moban": 2, "age": 4}, { "moban": 3, "age": 10, "wanju": [{"name": "list_item_list1", "moban": 1}, {"name": "list_item_list2", "moban": 2, a: 5}] }] }); console.log(myepii.getDataValue("name")); console.log(myepii.getDataValue("list",1,"age")); console.log(myepii.getDataValue("list",4,"wanju",1,"name")); },3000); }, 3000);</script>
点击查看效果demo12.html
Epii.js 一个极其简单的Js模板引擎
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。