Epii.js 一個極其簡單的Js模板引擎
阿新 • • 發佈:2017-07-28
idt 定義 images 更多 mas play 寫法 ren gin
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=‘{hi}‘ style=‘font-size:{font}‘></span> </div> </body>
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="title"
和r-data="{title}"
的區別是,在title
值不存在時,第一種情況 將顯示 title 字符串,第二種情況 顯示空,如果第二種情況設置了r-data-default 則顯示其設置的默認值。
示例
<div id="content"> <span r-data=‘您好,我是{name}‘ style=‘font-size:{font}‘></span> <div style="background-color: {bgcolor}"> 我的Logo是:<br><img r-data="logo_img"> </div> <span r-data="{subject}" r-data-default="默認的簡介:我叫:{name}"></span> <p > 成立於:<input r-data="{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="{info.title}" style="color:{info.title_color}"></span></p>
<p>subject:<span r-data="{info.subject}"></span></p>
<div>
作者信息: name:<span r-data="{info.author.name}"></span>,sex:<span r-data="{info.author.sex}"></span>
</div>
</div>
<div>
<div>
設置空間的寫法
<!--r-data 設置變量空間 設置空間為 info,在空間內部 info.title 直接寫 title就可以 的寫法-->
<div r-data="{info}" style="background: cadetblue">
<p>title:<span r-data="{title}" style="color:{title_color}"></span></p>
<p>subject:<span r-data="{subject}"></span></p>
<div r-data="author">
作者信息: name:<span r-data="name"></span>,sex:<span r-data="{sex}"></span>
</div>
</div>
全部代碼
<div id="content"> <!-- 不設置空間的寫法--> <div> <p>title:<span r-data="{info.title}" style="color:{info.title_color}"></span></p> <p>subject:<span r-data="{info.subject}"></span></p> <div> 作者信息: name:<span r-data="{info.author.name}"></span>,sex:<span r-data="{info.author.sex}"></span> </div> </div> <!--r-data 設置變量空間 設置空間為 info,在空間內部 info.title 直接寫 title就可以 的寫法--> <div r-data="{info}" style="background: cadetblue"> <p>title:<span r-data="{title}" style="color:{title_color}"></span></p> <p>subject:<span r-data="{subject}"></span></p> <div r-data="author"> 作者信息: name:<span r-data="name"></span>,sex:<span r-data="{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="title" style="display: {h1_display}"> <!--第一種方法,直接在style中 用變量,不推薦--> </h1> <br> <img r-data="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="title" r-click-change="{baidu_link}"> </h1> <br> <img r-data="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="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="title" > </h1> <div r-list="users"> <div>名稱<span r-data="name"></span>,年齡<span r-data="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="title" > </h1> <div r-list="users"> <div r-display="{item_type}-1==0" style="名稱<span r-data="name"></span>,年齡<span r-data="age"></span></div> <div r-display="{item_type}-2==0" style="名稱<span r-data="name"></span>,年齡<span r-data="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="title" > </h1> <div r-list="users"> <div r-display="{item_type}-1==0" style="名稱<span r-data="name"></span>,年齡<span r-data="age"></span></div> <div r-display="{item_type}-2==0" style="名稱<span r-data="name"></span>,年齡<span r-data="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="title" > </h1> <div r-list="users"> <div r-display="{item_type}-1==0" style="名稱<span r-data="name"></span>,年齡<span r-data="age"></span></div> <div r-display="{item_type}-2==0" style="名稱<span r-data="name"></span>,年齡<span r-data="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="title" > </h1> <div r-list="users"> <div r-display="{item_type}-1==0" style="名稱<span r-data="name"></span>,年齡<span r-data="age"></span></div> <div r-display="{item_type}-2==0" style="名稱<span r-data="name"></span>,年齡<span r-data="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="我的名字是{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="show_name" r-display="{isshow}-1==0" style="background-color: green"> </div> <div r-data="{hebei}" r-data-default="默認值{name}" style="width:{width}px;height:{height}px;display: {display}" > </div> <div r-data="{map.age}" r-display="{map.show}-1==0" > </div> <img r-data="{img_url}" > ![]({img_url}) <input type="text" r-data="{img_url}" > <input type="text" value="{img_url}" > <div r-list="list" style="background-color: #007bc7"> <span r-data="name" r-display="{moban}-1==0"></span> <span r-data="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="name" r-display="{moban}-1==0"></span> <span r-data="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 = { "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模板引擎